Question

For a while now I’ve been laying out input elements on form etc by using a width of an enclosing element e.g. div tag and then applying a % width to all form elements such as input and textarea.

Some example markup might be:

<div class="span4">
    <label>Form Label</label>
    <input type="text" value="My Value"/>
</div>

the css would then include:

form input, form textarea {
    width: 95%;
}

I had originally come up with this as a means to avoid having to additionally specify size information on form elements as well as block elements. Anyway, with this approach, I seem to continually come into scenarios where this convenience breaks other things e.g. when I place a button beside the element.

My question is whether there’s any good alternatives to placing widths on form elements directly that others have been using.

Answer 1

You could use attribute selectors:

form input[type="text"], form textarea {
    width: 95%;
}

or

form input, form textarea {
    width: 95%;
}
form input[type="button"]{
    width:auto;
}

But you were doing it the right way: CSS is intended to define styles, and width is a style.