So here's a fiddle demonstrating the problem: http://jsfiddle.net/CVTrb/1/, click and select on any option, and then you should see a thin gray line appear that doesn't exactly sit within the <select> element.
Here's an image demonstrating this:
:
Asked
Active
Viewed 626 times
5
freefaller
- 19,368
- 7
- 57
- 87
Louis93
- 3,843
- 8
- 48
- 94
3 Answers
6
Credit to this post here: https://stackoverflow.com/a/18853002/1261316
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Community
- 1
- 1
Dryden Long
- 10,072
- 2
- 35
- 47
4
Add outline: none; to .form-dropdown
j08691
- 204,283
- 31
- 260
- 272
-
1For some reason this solution did not work, @DrydenLong's did though. This is why I selected his answer FYI. – Louis93 Mar 28 '14 at 16:50
0
I'm going to add a tweak:
If you've got disabled options, that text-shadow kinda uglifies them
select:-moz-focusring {
color: transparent; /* hides that darn border... and the options */
text-shadow: 0 0 0 #000; /* "unhide" the options */
}
select:-moz-focusring option:disabled {
text-shadow: none; /* remove the inherited shadow from disabled options */
}
Brad Kent
- 4,982
- 3
- 22
- 26