CODEWITHSUNDEEP
htmlcss
justanotherguy
justanotherguy

Reputation: 516

Set select "height" in CSS unless "size" is greater than 1

I want to update my CSS page to set a standard height for all select boxes unless the box is a multi-select box and the size isn't any greater than 1.

I have the first part of this figured out:

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

This works well, except for select boxes like this:

<select size="10">

Is there a way to make an exception for these types of select boxes just using CSS like I did for the mutiple-select boxes? I could accomplish this by updating all these select boxes with a new class, but would rather avoid that if possible.

Upvotes: 0

Views: 1224

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272106

You can use the following CSS selectors, in that order:

select[multiple], select[size] {
    height: auto;
}
select, select[size="1"] {
    height: 24px;
}

Demo here

Upvotes: 2

Deryck
Deryck

Reputation: 7658

Working demo

For some reason the CSS selector only works on my browser with quotes around the 5

CSS

select:not([multiple]):not([size]) {
    height: 24px;
}
select[size='10'], select[multiple] {
    height: auto;
}

Upvotes: 3

Related Questions