Question

I use an external CSS Stylesheet that I can’t or don’t want to change. It defines the default length of an select field.

So in the external stylesheet there is something like:

select { width: 200px }

Now I have some places where I want this to be different. I want the browser to choose the necessary size to accommodate the content. In my stylesheet I want to something like this:

select.some-class { width: none_specified }

So a select with “some-class” will not be 200px wide, but as wide as the browser thinks is right.

How can I achieve that?

Answer 1

All CSS properties have a default value. For width it’s auto.

select.some-class { width: auto; }

Note that you can’t always override CSS so easily, sometimes you need to use style attribute

<div style="width: auto;"> ... </div>