How can I style the select tag arrow in Firefox?

Question

How can I style the select tag arrow in Firefox?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have this little problem. I have a layout that needs to be exactly the same as I did, inside it the input definitions of type text and select .

In Google Chrome, everything worked wonderfully, since the arrow was cute, as in the example:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
}

<input class="form-control" />


<select class="form-control">
</select>

Google Chrome result:

InFirefox,inturn,thearrowisrenderedlikethis:

How do I style this <SELECT> arrow to look the same in all browsers?

html html5 css3 firefox

asked by anonymous 25.10.2017 / 16:44

2 answers

1

I will make a contribution. I solved this by using a wrapper class around a select , where I remove all the style from this. In this "wrapper" I use the pseudo-element ::after to create the little set (with the SVG that the @GuilhermeNascimento indicated or even with a character).

See how it would look

.my-select{
   border: 1px solid #aaa;
   border-radius: 4px;
   display: inline-block;
   position:relative;
   width: 100%;
}

.my-select:after{
   content: ' ';
   background-image: url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=");
   background-position: center;
   background-size: 50%;
   background-repeat: no-repeat;
   position: absolute;
   height: 100%;
   width: 25px;
   top: 0;
   right: 0;
   margin: 5px;
   pointer-events: none;
}

.my-select > select{
   -moz-appearance: none;
   -webkit-appearance: none;
   -ms-appearance: none;
   border: none;
   width: 100%;
   height: 100%;
   padding: 15px 10px;
   background-color: transparent;
}

<span class="my-select">
    <select>
       <option>um</option>
       <option>um</option>
       <option>um</option>
    </select>
</span>

Just to complement: The reason for putting pointer-events: none is here .

03.05.2018 / 18:36

SQLite - too many levels of trigger recursion Display the position of a given value in a vector in the R

score 2 · Accepted Answer

Simply pure with CSS does not give, you'll have to simulate the arrow maybe with a background image, you need to remove the element's decoration using #

This is because forms controls are generally generated from the "native" controls of "operating system" and for many times this is not fully customizable because the engine does not pass or can not "pass" the whole control, or is something that has not yet been developed to be its own control over the native one in the system.

I made an example with an SVG image, the right alignment is more complex if the appearance: use <select> (or percentage based), so the legal would be to add the spaces in the image itself, in the case follows an example simple:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
 }

 select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none; /*provavelmente será implementado no futuro*/

    background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=) center right no-repeat;

   background-size: 8px 8px;
}

<input class="form-control" />


<select class="form-control">
</select>