CSS: Style HTML multiple-choice elements

问题

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?

回答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;
}

回答2:

Results may be OS dependent as well as browser-dependent. Even though CSS styles can be applied to select and options elements, I can see that some browsers (especially old ones) might just defer to the OS to display these widgets.

This is a similar question to How to style a <select> dropdown with CSS only without JavaScript?.

回答3:

I'm amazed that no-one has mentioned Chosen yet.

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

All modern desktop browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled. Chosen is disabled on iPhone, iPod Touch, and Android mobile devices.

Because it replaces the select element with a div and then binds all events between the two, you can style it however you so wish and it will still react as if it were a normal select box. Pretty cool.

来源：https://stackoverflow.com/questions/6725997/css-style-html-select-multiple-choice-elements

标签

html