I've spent the last few hours trying to style a select dropdown. It's lame, so lame. It's lame because the best and prettier options use JavaScript.
That's great, if you don't care about mobile. One of the cool things about select dropdowns is that in mobile they have a special helper:
I've looked to a lot of resource but none can be compared to Bootstrap.
So basically I ripped off their select dropdown styles. It looks great on Google Chrome, Safari and, more or less, on Firefox.
With the styles below you can turn this crap:
Into this cool select dropdown:
HTML
<select name="element" id="element">
<option value="1">First option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
</select>
Code language: HTML, XML (xml)
CSS
#element{
-webkit-align-items: center;
-webkit-appearance: menulist-button;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(204, 204, 204);
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 30px;
letter-spacing: normal;
line-height: normal;
margin: 0px 0px 10px 0px;
padding: 4px 6px;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: middle;
white-space: pre;
word-spacing: 0px;
width: 220px;
}
Code language: CSS (css)
in FF 56.0.2 64-Bit the Drop-Down Triangle is not styled, in chrome its working fine
Yeah you can not fully style a dropdown in Firefox.
If you really need the same dropdown you need some sort of custom library.
Doesn’t work fam
Helpful comment! What doesn’t work? How do you see it? Can you share a screenshot?