Styling HTML FORM elements with padding, with width 100%

Question

I'm styling a form by using a table with fixed-width columns and I want the input elements inside the <td> to fill the container. I know the CSS box model and I know the elements would bleed through with width: 100%, but the problem is with its consistency.

<input> elements bleed through as expected but <select> elements don’t. This results in making my fields not line up properly. I've tried all properties like overflow, display, whitespace... it doesn’t make any difference. What’s with the <select> element? I can see in Firebug that they have the same box model properties with the input element, but they don’t render the same.

I’m using HTML 5 doctype and this happens both in Firefox and Chrome.

Right now, I’m fixing this using a JS function which selects all elements with class stretch and computes and sets the static width to make it fit inside the container. This perfectly lines up the elements of the form. (I had to exclude <select> elements because their widths were already okay... weird quirk.)

Is there a pure CSS solution to this? I wouldn’t want to run this function everytime a part of the page is updated, like on AJAX calls...

Answer 1

Not the most helpful answer, but CSS styling of form elements is pretty unreliable between browsers. A JavaScript solution like yours is the best bet.

Two reasons for the unreliability:

1. Some features of form elements can’t be described by CSS. The <select> element is a good example: there aren’t any CSS properties that can describe the different ways a <select> element looks on different operating systems.

   Trying to work out which CSS properties should affect form elements, and how, is a rat’s nest for browser makers, so they’ve mostly left it alone. Safari is a notable exception; see e.g. http://webkit.org/blog/17/the-new-form-controls-checkbox-2/

2. You can argue that form elements should look the same between sites regardless of the site owners’ intentions, so that users know what they’re clicking on.

See http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ for a deeper examination.

Answer 2

The best way is to fake the borders of the elements with a div.

<div class="formholder>
    <textarea></textarea>
</div>

With this CSS:

.formholder {padding:10px;background:white;border:1px solid #ccc}
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}

Of course, you can expand that for other fields. Some browsers might give you issues. Chrome and webkit allow you to resize textareas but if you add resize: none; to your CSS, it should disable it but YMMV.

Answer 3

Say your html looks somewhat like this:

<form><table><tr>
 <td><input type="text" /></td>
 <td><select><option /><option /></select></td>
</tr></table></form>

How about just using the input and select for setting the width?

td { width: auto; }
input[type=text] { width: 100px; }
select { width: 100px; }

Or did I get your problem wrong?

Answer 4

It may help you to know the following results from various usability studies.

1) For most forms, people prefer to see the label just above the form element:

2) People find it useful if the form elements are sized appropriately to help suggest how much information is expected.

<ul>

    <li><label for="firstname">First Name</label><br>
        <input type="text" id="firstname" name="firstname" size="15"></li>

    <li><label for="age">Age</label><br>
        <input type="text" id="age" name="age" size="3"></li>

    <!-- ... more list items -->

</ul>

Note: the list in this example would be styled so that it doesn't appear as a bullet-point list. Using lists in this way helps with accessibility as screen readers will tell the user how many items are contained in the list.

I thought this might be useful as it suggests that your efforts may be a bit wasted trying to layout the form in a table and stretch all inputs to the same length.

http://dev.w3.org/html5/markup/input.html#input