CSS 可以否决 HTML 输入大小声明

Question

我继承了一个网站，该网站在各个页面上都有很多输入，例如：

<input name="name" type="text" id="name" size="40" maxlength="64">

和

<textarea name="descr" cols="40" rows="2" id="descr">

我一直在改进网站的 CSS，使其布局灵活，适用于移动设备等。但 HTML 的size/cols 规则坚持设置固定大小，不受外界因素影响。

我尝试过使用 CSS，例如：

CSS：

input, textarea, select {
    max-width:100%;
}

（并且还附加了!important）但这不会影响元素。

它已被转换为 HTML5 模板，输入在一个表格中（但表格很灵活，不是问题）。

有没有办法让 CSS 覆盖输入中的 HTML size/cols 声明？

多个页面上的大量输入要求我找到一种简单的 CSS 方法来一举覆盖它们。据我所知，这似乎并不直接可行，我将不得不检查并编辑每个输入元素:-/ 的大小值。

编辑

完整代码：

HTML：

<table id='centralTable'>
       <tr>
             <td colspan="2">Update Category</td>
       </tr>
       <tr>
             <td width="28%"><strong><label for='name'>Category Name</label></strong></td>
              <td width="70%"><input name="name" type="text" id="name" value="catname" size="40" maxlength="40" required></td>
      </tr>
       <tr>
             <td><input name="id" type="hidden" id="id" value="12" >
             </td>
             <td><input type="submit" value="Update" ></td>
        </tr>
  </table>

CSS：

#centralTable {
    width:90%;
    max-width:780px;
    min-width:300px;
    margin:1rem auto;
}

input, textarea, select {
   max-width:100%;
}

如果我调整 size 值的大小，页面上的其他元素会按预期适合屏幕，但 size 值会抵消这一点。 Firebug 显示max-width 已应用于元素，但元素大小与此不符。

编辑二：

将td 元素max-width 设置为px 值 而不是百分比有效，但显然不适应视口大小。

td {
  max-width:200px; /* This works in containing the input size */
}

Answer 1

CSS 可以使用width 覆盖size 属性。有一个good explanation about it here。

这里，我们有一个典型的输入，大小为 10：

<input type="text" size="10">

这是同样的输入，用 CSS 调整

input {
  width: 20px;
}

<input type="text" size="10">

max-width 也是一个可行的选择，视情况而定

div {
  width: 20px;
}

input {
  max-width: 100%;
}

<div>
  <input type="text" size="10">
</div>

Answer 2

好的，我想我明白了：

表格元素设置为百分比大小，但表格的本质是它们会扩展以适应其内容，并且内容设置为最大为表格大小的 100%，因此：

• Size 设置输入元素的大小：
• 表格单元格展开以包含输入元素
• CSS 输入将输入设置为填充表格单元格

所以;使用视口宽度作为值可以为size 提供更绝对的容器。

#centralTable input, #centralTable textarea, #centralTable select {
    max-width:65vw;
}

这个限制器，而不是百分比限制器，会正确调整子输入size 值的大小。

应优先使用视口宽度单位而不是百分比尺寸。