Dropdown Default Styling
When I say dropdown menu, I mean:
<select>
<option>Apples</option>
<option>Oranges</option>
<option>Banannas</option>
</select>Left completely alone by CSS, this will render consistently across browsers. On Macs, 11px Lucida Grande.
What if you change the font-family?
select {
font-family: Cursive;
}WebKit browsers (Safari, Chrome) will ignore you. Firefox, Opera, and IE will respect your change. The
font-familywon't cascade into the select though, you have to explicitly declare it on them.What if you change the font-size?
select {
font-size: 32px;
}This is a fun one. In WebKit, if the font-size is between 0 and 10px, it will render the font size as 10px. From 11px to 15px, it will render as 11px, and 16px or larger it will render it as (wait for it), 14px. This behavior is similar they handle search inputs.
Firefox, Opera, and IE will respect your change but again only if explicitly declared on the select, it will not cascade.
0 comments