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 可以size使用 覆盖该属性width。这里有一个很好的解释。

这里，我们有一个典型的输入，大小为 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>