Dropdown Select Box not showing correctly with custom CSS? - css

Question

How can I add custom CSS select box styling for Chrome and Safari? IS there a fix?

Answer 1

Answer:
You need to add -webkit-appearance: none; and a height value for Chrome and Safari.
Any Suggestions?
Resource:
http://bavotasan.com/2011/style-select-box-using-only-css/
Try it on JSFiddle Remove and add that style in Google Chrome:
Before:
- http://jsfiddle.net/JoshSalway/jw6Qy/
After:
- http://jsfiddle.net/JoshSalway/cMbTB/
select{
-webkit-appearance: none;
}

Answer 2

<select> tags are stubborn creatures but there is a way.
If there's a "size" parameter in the tag, almost any CSS will apply. Using this technique, I've created a fiddle that's practically equivalent to a normal select tag, plus the value can be edited manually like a ComboBox in visual languages (unless you put readonly in the input tag).
So here's a minimal example to see the principle behind:
(you'll need jQuery for the clicking mechanism):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Here's the fiddle with some more styles:
https://jsfiddle.net/dkellner/7ac9us70/
Hope this helps!