Take the 2-minute tour ×

Normally you can do this:

<select size="3">

And it would render as a selectionbox where all three options are visible (without dropping down)
I'm looking for a way to set this size attribute from css.

share|improve this question

6 Answers 6

up vote 7 down vote accepted

There ins't an option for setting the size, but if you do set the size some browsers will let you set the width/height properties to whatever you want via CSS.

Some = Firefox, Chrome, Safari, Opera.

Not much works in IE though (no surprise)

You could though, if you wanted, use CSS expressions in IE, to check if the size attribute is set, and if so, run JS to (re)set it to the size you want... e.g.

size = options.length;
share|improve this answer
Tested size=2 in HTML & height:20em in CSS and it works in IE8, FF13, Chrome19, Opera12. –  some Jun 26 '12 at 1:25

I don't think that this is possible.

CSS properties are very generic (applicable to any element) and are unable to alter the functionality of an element in any ways (only the looks).

The size attribute is changing the functionality of the element at least in the case of size = 1 / size != 1.

share|improve this answer

I disagree, I have been able to set select width and height using CSS with something like this:

select { width: 5em; height: 5em; }

Works in IE(7) as well as I just tested it.

share|improve this answer
This is an old question but I was running into issue with Safari ignoring the size= attribute when using a size < 4. I was able to use the above suggestion in css height: 3em; to consistently set a multiple select to approximately 2 lines (FF8, IE9, Safari4, Chrome15). Seems to be a reasonable replacement for the size=2 attribute –  toyNN Dec 1 '11 at 0:59
This answer isn't applicable to the question - OP was talking about the size attribute, not the physical size. The size attribute turns the dropdown into a scrollable list of n elements, where n is the size. –  Steve May 2 '13 at 0:41

I do not believe this is possible no

share|improve this answer

In general you can't add attributes set within html via CSS. You can add to the html using the pseudo selectors :before and :after, but that's about it, plus they still aren't compatible across all browsers. If you really need to do this, I think you'd have to resort to Javascript.

share|improve this answer
I agree. This strikes me as a job for jQuery. –  Martin Burch Jul 28 '12 at 5:48

Try this:

select[attr=size] {
share|improve this answer
Hi marco, welcome to StackOverflow! Please try to explain a little more about your answer rather than just posting code. This will help people find and understand your answer. –  Steve H. Mar 12 at 2:56

Your Answer


