How to implement Chrome style for select tag in all browsers

4 min readNov 18, 2019

Hey! In this post I’d like to show how you can easily style you select so that it look the same in all browsers (IE, Chrome, FF and Safari).

Let’s say you have simple markup for select:

<select>
    <option>Your Select</option>
</select>

This default select will appear differently on Chrome, IE and Safari:

Safari:

Firefox:

Chrome:

IE:

What we will be doing is basically set the default Chrome look for all browsers.

So to get it look same on all browsers let’s first of all download image for our select arrows:

data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+

… and save it to your images folder as the ‘select-arrows.png’ (sure file name is up to you :) )

Let’s now add some styles to start making our select cross-browser:

We need to drop the default display of our browsers. For this purpose we’ll use appearance rule:

select {
   -webkit-appearance: none;
   -moz-appearance: none;

…

But! That will only work for chrome, safari and firefox.

To drop default styling for IE create another select rule with microsoft extension pseudo element:

select::-ms-expand {
   display: none;
}

Then we’ll add the arrows image which we just downloaded. We’ll set it like a background for our select

background: url('path_to_you_images_folder/select-arrows.svg') no-repeat 100% 50%;

Now we have two issues:

1 We need to vertically align text inside select tag as since it’s at the bottom of the select:

This occurs on chrome, safari and FF and it’s an easy fix. We just need to add font-size and line-height. So now our css for select looks like this:

select::-ms-expand {
   display: none;
}

select {
   font-size: 16px;
   line-height: 16px;
   background: url('path_to_you_images_folder/select-arrows.svg') no-repeat 100% 50%;
   -webkit-appearance: none;
   -moz-appearance: none;
}

2 We have now also issue with IE. The arrow appears to be in the center of our select:

The reason of this is how our SVG image fills the entire element. If you open it in you IDE (e.g. I’m using php storm) you’ll see the arrow placed in the center:

To get it properly displayed on IE you need to change aspect ratio for it.

Check the code for this image. The default image you downloaded should look like this:

<svg
    id="Layer_1"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 4.95 10"
>
    <defs>
        <style>.cls-1{fill:#fff;}.cls-2{fill:#444;}</style>
    </defs>
    <title>arrows</title>
    <rect class="cls-1" width="4.95" height="10"/>
    <polygon class="cls-2" points="1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67"/>
    <polygon class="cls-2" points="3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33"/>
</svg>

You need to add preserveAspectRatio=”xMaxYMid” to your svg tag to move it to the right:

<svg
        id="Layer_1"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMaxYMid"
        viewBox="0 0 4.95 10"
>

Now you can notice the image changed:

Now you should see the select in IE looks the same as in the rest of browsers

Hope that will be useful for you!

See you in a bit!

How to implement Chrome style for select tag in all browsers

Written by Kostiantyn Chernysh