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

Question

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

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

和

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

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

我尝试过使用 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值(value)抵消了这一点。 Firebug 显示 max-width应用于元素但元素大小不符合此。

编辑二:

设置 td元素 max-width到 像素值 而不是百分比有效，但显然不适应视口(viewport)大小。

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

Answer 1

CSS 可以覆盖 size属性使用 width .有一个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>