Style Select And Multiple Select?

Question

How can I style both the <select> HTML tag, and the <select multiple="multiple"> HTML tag while both of the tags reside under a <form> tag? Of course styling within CSS. If someone knows how to accomplish this, may someone give me an example?

Thank you! Aaron

Answer 1

You can use classes fairly easily:

.singleSelect {
  width: 200px;
}

.singleMultiple {
  width: 300px;
}

<form>
 <select class="singleSelect">
  <option>Test</option>
 </select>'
 <br/>
 <select class="singleMultiple" multiple="multiple">
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
 </select>
</form>

http://jsfiddle.net/GyxL4/

A more advanced selector may be used on the select[multiple], but beware, legacy browsers (EDIT: apparently only IE6) may not always support the attribute selector, and in the first example below, you're styling every SELECT element on the page (this is called an element selector):

select {
  width: 200px;
}

select[multiple] {
  width: 300px;
}

See: http://www.w3.org/TR/CSS2/selector.html