CODEWITHSUNDEEP
htmlcss
JEP
JEP

Reputation: 39

custom select arrow - chrome vs internet explorer display issues

I used css to style my select arrow, and it's displaying how I want it to in chrome. However, in internet explorer, it is displaying both the default arrow AND my restyled arrow. I'm fine with displaying either one in internet explorer, but not both. Any idea how to keep it as is in chrome, but change it to one or the other in internet explorer?

Here's my css:

select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;

            -moz-appearance: none;
            -webkit-appearance: none;
            -webkit-border-radius: 0px;
            appearance: none;
            outline-width: 0;
            }

This is how it looks in chrome:

This is how it displays in chrome

This is how it looks in internet explorer:

This is how it displays in internet explorer

Update, using schylake's fix below - default arrow has disappeared, but would like the custom arrow moved to the right:

enter image description here

Upvotes: 0

Views: 949

Answers (1)

schylake
schylake

Reputation: 444

The appearance is not supported in IE. refer to this for more information about it. https://www.w3schools.com/cssref/css3_pr_appearance.asp

The reason it works in chrome is because of this line 

-webkit-appearance

This will work on IE10+. Found this while researching the same issue

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

Upvotes: 1

Related Questions