Question

I’m using some <select row="3" multiple="multiple"> elements on a page.

I’ve been trying to style them so that the text inside matches the rest of the page.
I started with changing the font (select {font-family: 'foo';}). But, I need an increased font-size and line-height for the new font. And it isn’t letting me change that. I’ve tried using inline styles, styling the select, and styling the options.

How can I change properties like font-size and line-height inside a <select> box?

Answer 1

Unfortunately not all browsers allow you to change the layout of SELECT or OPTION items.

You could say that it’s probably better to leave styling of select boxes, optgroup and options alone and just leave them as the defaults because cross browser styling is so inconsistent it’s not worth the bother.

Good website explaining you the things that CAN be styled is the following: Table containing all info you need.

Your HTML:

<select multiple="multiple">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
</select>

Your CSS (example):

select {
    font-family: 'Times New Roman';
}

select option {
    background-color: #FFFF00;
    color: #FF0000;
}