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