CODEWITHSUNDEEP
cssselectwidthhtml-select
John Makii
John Makii

Reputation: 89

Select option width

I'm not really experienced in CSS and I have no tools that are best used in designing webpages such as Microsoft expression.

My problem is simple: I want my page to look as symmetrical as possible so I want my select options to be of same width. I've searched and the best solution is to use width="" option on CSS. So how do I go about this?

I have this example:

<tr>
    <td>
        <label for="meal">Meal:</label>
    </td>
    <td>
        <select name="meal">
            <option selected="selected" value="0">Any</option>
            <option value="Breakfast">Breakfast</option>
            <option value="Brunch">Brunch</option>
            <option value="Lunch">Lunch</option>
            <option value="Snack">Snack</option>
            <option value="Dinner">Dinner</option>
        </select>
    </td>
    <td>
        <label for="cooking">Cooking:</label>
    </td>
    <td>
        <select name="cooking">
            <option selected="selected" value="0">Any</option>
            <option value="Baked">Baked</option>
            <option value="BBQ">Barbecque</option>
            <option value="Boiled">Boiled</option>
            <option value="Dfried">Deep Fried</option>
            <option value="Grilled">Grilled</option>
            <option value="Steamed">Steamed</option>
        </select>
    </td>
</tr>

Upvotes: 6

Views: 83768

Answers (4)

akwasiijunior
akwasiijunior

Reputation: 175

I'd put a class on the selects and use 

<select class="selectList" id="meal"><option>your options</options></select

and then added this to your css

select.selectList { width: 150px; }

Note: label for works with id's and not name and refrain from using inline-style css ().

jsfiddle

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

If you want to set the same width on all select elements in a document, you can write e.g.

<style>
select { width: 5.5em }
</style>

in the head part. If you wish to do that for some select elements only, you need to replace the selector select by something more restrictive, e.g. select.foo to restrict the effect to those select elements that have the class=foo attribute.

This is tricky because you need a width that is sufficient for all options, and you probably want to get as close to the maximal width as possible. The widths of options depend on their text and on the font. (Using the px makes things even worse. Then things would depend on font size, too.)

Consider whether it is necessary to set the widths the same. It is just an esthetic preference, not shared by all people, and it may in fact be bad for usability. A dropdown with short options should perhaps look different from another dropdown that has long options.

Upvotes: 9

Dale
Dale

Reputation: 955

In your stylesheet:

table tr td select{width:150px;}

That will make all the selectboxes inside a table cell the same width. I would not go the inline css route.

Upvotes: 0

alejo802
alejo802

Reputation: 2117

For your width setting, you have a small typo. You need

<select style="width: 400px">

Upvotes: 0

Related Questions