Select option width

Question

Im 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, its somehow vain.. neways,

i want my page to look 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?

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>

Solution 1

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.

Solution 2

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