使用填充设置 HTML FORM 元素的样式，宽度为 100%答案

【问题标题】：Styling HTML FORM elements with padding, with width 100%使用填充设置 HTML FORM 元素的样式，宽度为 100%
【发布时间】：2011-01-20 21:43:51
【问题描述】：

我正在使用具有固定宽度列的表格来设置表单的样式，并且我希望 <td> 中的输入元素填充容器。我知道 CSS 盒子模型，并且我知道元素会随着 width: 100% 而溢出，但问题在于它的一致性。

<input> 元素按预期渗透，但 <select> 元素不会。这导致我的字段无法正确排列。我已经尝试了所有属性，如溢出、显示、空白……它没有任何区别。 <select> 元素是怎么回事？我可以在 Firebug 中看到它们与输入元素具有相同的框模型属性，但它们的呈现方式不同。

我使用的是 HTML 5 文档类型，这在 Firefox 和 Chrome 中都会发生。

现在，我正在使用一个 JS 函数来解决这个问题，该函数选择所有具有类拉伸的元素并计算并设置静态宽度以使其适合容器内。这完美地排列了表单的元素。（我不得不排除 <select> 元素，因为它们的宽度已经可以了......奇怪的怪癖。）

有没有纯 CSS 解决方案？我不想在每次更新页面的一部分时都运行这个函数，比如在 AJAX 调用上......

【问题讨论】：

可以看一些源代码吗？
我做了截图澄清问题：smg.photobucket.com/albums/v208/Engwan/StackOverflow/…

标签： javascript html css forms width

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以在文本字段和文本区域上使用box-sizing: border-box;。它解决了与选择框的区别。

【讨论】：

【解决方案3】：

它可以帮助您了解各种可用性研究的以下结果。

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

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>

注意：此示例中的列表将进行样式设置，使其不会显示为项目符号列表。以这种方式使用列表有助于提高可访问性，因为屏幕阅读器会告诉用户列表中包含多少项目。

我认为这可能很有用，因为它表明您尝试在表格中布局表单并将所有输入拉伸到相同长度可能有点浪费。

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

【讨论】：

【解决方案4】：

假设你的 html 看起来有点像这样：

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

仅使用input 和select 来设置宽度怎么样？

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

还是我把你的问题弄错了？

【讨论】：

我希望它依赖于容器，因为我希望设计是流畅的。例如，在一个有 3 列的表格中，我定义了 2 列的宽度，并让第三列根据表格大小自动调整大小。我希望 td 中的表单元素也能效仿

【解决方案5】：

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

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

使用这个 CSS：

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

当然，您可以将其扩展到其他领域。某些浏览器可能会给您带来问题。 Chrome 和 webkit 允许你调整 textareas 的大小，但如果你将 resize: none; 添加到你的 CSS，它应该禁用它，但 YMMV。

【讨论】：

是的，这应该可以，但我想避免这种情况，因为我正在开发一个有很多表单和很多字段的 webapp.. 不想要太多的混乱

【解决方案6】：

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

不可靠的两个原因：

表单元素的某些特性无法用 CSS 描述。 <select> 元素就是一个很好的例子：没有任何 CSS 属性可以描述 <select> 元素在不同操作系统上的不同外观。

试图找出哪些 CSS 属性应该影响表单元素，以及如何影响，对于浏览器制造商来说是一个老鼠窝，所以他们大多不理会它。 Safari 是一个明显的例外。参见例如http://webkit.org/blog/17/the-new-form-controls-checkbox-2/
您可以争辩说，无论网站所有者的意图如何，网站之间的表单元素应该看起来相同，以便用户知道他们在点击什么。

请参阅http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ 进行更深入的检查。

【讨论】：