Styling HTML FORM elements with padding, 100% wide

Question

I am creating a form using a table with fixed-width columns, and I want the input elements inside the <td> fill the container. I know the CSS block model, and I know that elements will skip using width: 100% , but the problem is with its consistency.

<input> elements expire as expected, but <select> elements dont. This causes my fields to not align correctly. I tried all the properties, such as overflow, display, spaces ... it does not matter. What happens to the <select> element? I see in Firebug that they have the same box model properties with an input element, but they do not display the same.

Im using HTML 5 doctype, and this happens in both Firefox and Chrome.

Right now, I am fixing this with a JS function that selects all elements with a class extension and calculates and sets the static width so that it fits into the container. It perfectly combines form elements. (I had to exclude the <select> elements because their width was already fine ... weird quirk.)

Is there a clean CSS solution for this? I would not want to run this function every time a part of the page is refreshed, for example, on AJAX calls ...

Answer 1

Not the most useful answer, but styling the CSS of form elements is pretty unreliable between browsers. A better option would be a JavaScript solution similar to yours.

Two reasons for insecurity:

• Some functions of form elements cannot be described by CSS. The <select> element is a good example: there are any CSS properties that can describe the various ways in which the <select> element is viewed on different operating systems.

  Trying to figure out what CSS properties should affect form elements, and how it's a rat nest for browser developers, so they basically left it alone. Safari is a notable exception; see for example http://webkit.org/blog/17/the-new-form-controls-checkbox-2/

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

See http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ for a more in-depth study.

Answer 2

You can use box-sizing: border-box; for text fields and text fields. He decides the difference with the choice.

Answer 3

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

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

Using 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 extend this to other fields. Some browsers may give you problems. Chrome and webkit allow you to resize text fields, but if you add resize: none; in his CSS, he should disable it, but YMMV.

Answer 4

This can help you learn about the following results from various usability studies.

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

2) People find this useful if the form elements are sized to help guess 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 will look so that it does not appear as a list of markers. Using lists in this way helps with accessibility, as screen readers tell the user how many items are in the list.

I thought this could be useful, as it suggests that your efforts could be wasted trying to expand the form in the table and stretch all the inputs to the same length.

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

Answer 5

Say your html looks something like this:

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

How to just use input and select to set the width?

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

Or did I misunderstand your problem?

Answer 6

The following CSS works for Moz Firefox, for html input elements (submit, button, text), textarea elements, and even select elements. The select elements are almost the same length in the browser I'm trying to make.

 table {width:100%;} form input { width: 100%; } form textarea { width: 100%; overflow-y: scroll; resize: vertical; } form select { width: 100%; }