CSS for element SELECT multiple=yes

Question

I want to be able to define a height for the select element when its multiple to false

select{height: 30px;} 

But I don't want it to be applied when the select has the multiple=yes.

Can it be defined in CSS?

Answer 1

First things first, in order for a select element to not be in multi-selection mode, the multiple attribute must be entirely omitted. Even if you set multiple="no" or multiple="false", the standard behavior is the same as HTML multiple or XHTML multiple="multiple". For more information, refer to the HTML spec.

With this in mind, use the CSS3 :not() selector to exclude any select with that attribute:

select:not([multiple]) {     height: 30px; } 

Or if you need IE7+ support, apply the height to all select elements then reset it for those with that attribute:

select {     height: 30px; }  select[multiple] {     height: auto; }