0

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

JEP
  • 39
  • 1
  • 6
  • I'm afraid this is a very bad idea to do this as changing browser default items may avoid normal navigation. For your issue, you can do a specific stylesheet for IE using – Pauloscorps Nov 06 '17 at 16:59

1 Answers1

1

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;
}
schylake
  • 434
  • 3
  • 14
  • Thanks. Any recommendations for allowing it to display the default in IE, while keeping my custom arrow in chrome? – JEP Nov 06 '17 at 17:08
  • Which IE are you running i know a fix that works on IE 10+. I edited my answer the css code above will remove the arrow completely – schylake Nov 06 '17 at 17:09
  • Tried your fix above, and it got rid of the default nicely, but the custom arrow is still floating in the middle, rather than on the right. (And in answer to your question: I'd ideally like it to work in ie8+") – JEP Nov 06 '17 at 17:15
  • hmmm for ie 8 I don't think its possible to remove the arrow. What you can do is make a div and place it over the arrow with the arrow image you want. and make it so the div is shown above it but it clicks the bottom div. use this link to see how this is done. https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – schylake Nov 06 '17 at 17:23
  • Thanks a bunch for your help; It looks like your original fix works in ie8+ (at least, it appears to when I emulate those browsers). Still working on bumping the custom arrow to the right though. – JEP Nov 06 '17 at 17:25
  • glad i could help :) ill see if i can find anything about moving the arrow – schylake Nov 06 '17 at 17:27
  • how are you adding the arrow to the select can you post the css? – schylake Nov 06 '17 at 17:43
  • yeah. the css is in my original post at the top – JEP Nov 06 '17 at 17:45
  • ok try adding 'right' after the repeat in the url line tell me if that works. – schylake Nov 06 '17 at 17:47
  • Adding "right" caused the arrows to disappear completely from the input. – JEP Nov 06 '17 at 17:51
  • with the right still there add this line to your css background-position-x: 244px; and make the px value 20 lower than your box value – schylake Nov 06 '17 at 17:55
  • I'm not sure what you mean with "make the px value 20 lower than your box value" – JEP Nov 06 '17 at 18:04
  • if your select width is 300 make the width for background-position-x: 280px; – schylake Nov 06 '17 at 18:06
  • still just makes it disappear completely =/ Having "right" in there gives me the yellow yield sign in dev tools and crosses out the url completely. Tried various background-position-x px sizes without the "right", and it has no effect – JEP Nov 06 '17 at 18:15
  • 1
    the last thing i can think of is using this http://jsfiddle.net/qhCsJ/4120/ this person made a custom arrow maybe this will help. – schylake Nov 06 '17 at 19:06
  • You rock! I took that jsfiddle code and swapped out their URL with mine...The fixed the issue. – JEP Nov 06 '17 at 20:19