用填充样式化HTML表单元素，宽度为100%

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.

我使用具有固定宽度列的表来样式化表单，我希望中的输入元素填充容器。我知道CSS box模型，我知道元素的宽度是100%，但问题在于它的一致性。

<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.

我正在使用HTML 5 doctype，这在Firefox和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.)

现在，我使用一个JS函数来解决这个问题，该函数选择所有具有类扩展和计算的元素，并设置静态宽度以使其适合容器。这完美地排列了表单元素。(我必须排除

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...

有一个纯粹的CSS解决方案吗?我不希望每次页面的一部分更新时都运行这个函数，比如AJAX调用……

6 个解决方案

#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.

这不是最有帮助的答案，但是表单元素的CSS样式在浏览器之间是非常不可靠的。像你这样的JavaScript解决方案是最好的选择。

Two reasons for the unreliability:

不可靠的两个原因:

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.

CSS无法描述表单元素的某些特性。元素在不同操作系统上的不同外观。

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/

试图弄清楚哪些CSS属性应该影响表单元素，以及如何影响表单元素，是浏览器制造商的大麻烦，因此他们基本上不去管它。Safari是个明显的例外;看到如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 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.

请参阅http://meyerweb.com/eric/thinkts/2007/05/15/formal -weirdness/以获得更深入的研究。

#2

You could use box-sizing: border-box; on textfields and textarea's. It solves te difference with the selectbox.

您可以使用box- size: border-box;textfields字段和文本区域。它解决了与selectbox的不同之处。

#3

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

最好的方法是使用div来伪造元素的边框。

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

With this CSS:

这个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.

当然，您可以将它扩展到其他字段。有些浏览器可能会给您带来问题。Chrome和webkit允许你调整文本区域的大小，但是如果你添加了调整大小:无;对于你的CSS，它应该禁用它，但是YMMV。

#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:

1)对于大多数表单，人们更喜欢看到表单元素上方的标签:

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

2)如果表单元素的大小合适的话，人们会发现它是有用的，它可以帮助我们预测需要多少信息。

<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

http://dev.w3.org/html5/markup/input.html输入

#5

Say your html looks somewhat like this:

你的html看起来有点像这样:

<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?

还是我弄错了你的问题?

#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 nearly equal length in the browser I'm trying.

下面的CSS适用于Moz Firefox，适用于html输入元素(提交、按钮、文本)、textarea元素，甚至选择元素。在我正在尝试的浏览器中，select元素的长度几乎相等。

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

#1