Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary.

My problem lies with customizing this element using CSS:

#FromPopup {
            background: none; <--
            border: none;  <-----
            margin-left: 8px;
            position: relative;
            cursor: pointer;
            height: 5px;
            margin-top: -10px;
}

While this code successfully removes the background and border, the default pulldown button still shows up, resembling the Win Classic style.

Is there a way to hide the background and border of the pulldown button?

I am specifically targeting Mozilla platforms in this case only. Thank you!

htmlcsscustomizationmozillahtml-select

Answer №1

One solution is to typically use -moz-appearance:none, but there seems to be a bug with the arrow on select elements.

To learn more about this bug, check out the report here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Another workaround could involve wrapping an element around your select and using :after to place an element on top of it.

<div class="select-container">
    <select>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
    </select>
</div>

.select-container {
    display:inline-block;
    position:relative
}
.select-container:after {
    content:'';
    position:absolute;
    right:0;
    top:0;
    width:17px;
    height:100%;
    z-index:10;
    background-color:white;
}

Check out a demo of this workaround at http://jsfiddle.net/gaby/K8MJB/1/

Answer №2

Have you ever come across this:

How to get rid of the arrow in a select element on Firefox

It seems like your options are limited, but there are a couple of suggestions and solutions available. One workaround could be to hide the arrow using something like this:

select {
   overflow:hidden;
   width: 120%;
}

After that, you can customize it as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Web Form in Outlook Using the POST Method

Seeking help in creating an HTML email featuring two interactive buttons - Approve and Reject. I have successfully generated the HTML email and sent it to Outlook. Snapshot: The HTML code within the email: <!DOCTYPE html> <html lang="en" xmlns ...

htmlformsemailoutlook

Scrollspy in Twitter Bootstrap consistently highlights the final element

I'm struggling to understand why only the final section is being highlighted when scrolling. Can you help? <body data-spy="scroll" data-target="#homeToolbar" data-offset="50"> <nav class="navbar navbar-default navbar-fixed-top" id="homeToo ...

jqueryhtmlcsstwitter-bootstrap

Instructions on adding a class to a span within a div upon clicking the div

Is there a way to dynamically add a class to the span element inside a specific div when that div is clicked? There are multiple divs and spans with the same class name. $('.menu_item_conteiner').click(function() { $('.menu_item_conteiner ...

jqueryhtmlcss

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

javascriptjqueryhtmlcssbackground

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

Users who are utilizing Internet Explorer are unable to complete the search input field on my website

Hello, I am in the process of creating a website that frequently uses lengthy search terms. To optimize user experience, I have implemented a dropdown search bar inspired by the bootsnipp example below. While I have applied some custom styling to the desig ...

jquerycsshtmlnavigationbootstrap-4

Using Four Different Colour Borders in CSS

Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following: #header { border-color:#88a9eb; } I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done? I am looking ...

htmlcssborder

Tips for combining multiple fields into a single variable in PHP

When I click the submit button, the image source does not show any result but the image color is displayed. Any help would be greatly appreciated. <div class="form-group"> <input type="file" name="images[source][]" class="form-control input-l ...

phphtmlmysql

Select from a variety of backgrounds using the dropdown menu on the site

I seem to be struggling with javascript and php, but I know that in order to make this function properly, I need to utilize both languages. My goal is to set up a "select box" featuring 4 different images. There will be a default image displayed, but user ...

javascriptphpjqueryhtml

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson

Utilizing CSS to create a zoom effect on hover for an image while preserving its original size was successful, however, the issue arises as only a corner of the image is visible

On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusti ...

htmlcssbootstrap-4

Activating scrolling through Javascript

A friend of mine created a web page to help me learn some JavaScript. He designed a feature where the content in each div becomes visible as soon as the user scrolls past it. However, I noticed that the content appears too late for my liking. I would like ...

javascripthtmlcssanimationscroll

Update email address depending on the option chosen from the dropdown menu

My contact form includes the following fields: Name Email Number Department Message The "Department" field is a drop-down selection with seven options: Audio Engineering Graphic Design Music Production Photography Videography Web Development Other I ...

phphtmlformsemailcontact-form

The height and rows of a textarea element do not adjust properly to the content in FireFox

Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...

htmlcssfirefox

Is there a method in bootstrap that reveals the elements with the hidden class?

Currently, I am loading data into a bootstrap table on my JSP. The table class is hidden at the moment. After successfully uploading the data into the bootstrap table, I have implemented the following code: $(function() { var table = $('#Table') ...

javascriptjquerycsstwitter-bootstrap

Trigger a change event for a Material Checkbox by referencing its unique identifier

<div *ngFor="let cus of deselectedList | keyvalue" (click)="clickCheckBox('customer_'+cus.key+'_checkbox')"> {{cus.key}} <mat-checkbox id="customer_{{cus.key}}_checkbox" (change ...

htmlangulartypescriptdispatchevent

Conceal Child Component Element Upon onClick Event with ReactJS

As someone new to React, I am learning by coding. Currently, I have component A which includes a select element with menu items (all material UI). Is it possible for the whole component to disappear once a user chooses an option from the dropdown? Essentia ...

javascriptcssreactjsmaterial-uimaterial-design

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

<a class="nav-link" routerLink="/books" routerLinkActive="active (click)="bookTabIsClicked()" > Books </a> I am currently teaching myself Angular. I need help with disabling this tab when it is active ...

c#htmlangulartypescript