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属性。有good explanation about it here。

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

＆＃13;

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

＆＃13;

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

＆＃13;

input {
  width: 20px;
}

＆＃13;

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

＆＃13;

max-width也是一个可行的选择，具体取决于具体情况

＆＃13;

div {
  width: 20px;
}

input {
  max-width: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

好的，我想我已经明白了：

表元素设置为采用百分比大小，但表的性质是它们扩展以适合其内容，并且内容设置为最大占表大小的100％，因此：

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

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

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

此限制器而不是百分比限制器然后正确调整子输入size值的大小。

视口宽度单位应优先于百分比大小使用。

CSS可以过度规则HTML输入大小声明

修改

编辑二：

2 个答案: