Question

<style>

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

</style>
<body>

<input type="text" name="test" value="test" size="5" />
</body>

在浏览器（Firefox 5）上查看时，显示的“大小”是固定的200px。似乎我指定的大小完全被忽略了。

这是来自MVC项目，这是它附带的默认样式css。暂时，我取下宽度：200px。但有没有办法让它保持在那里，并在“输入”级别覆盖它？

我也试过

<input type="text" name="test" value="test" width="50px" />

它根本没有覆盖。

Answer 1

如果要在元素级别覆盖CSS宽度，请尝试直接将样式标记应用于元素：

<input type="text" name="test" value="test" style="width: 50px;" />

这对我有用：

<html>
   <style>

      input[type="text"] 
      {
         width: 200px;
         border: 1px solid #CCC;
      }
</style>
<body>
      <input type="text" name="test" value="test" style="width: 50px;" />
</body>
</html>

编辑添加：

是的，混合HTML w / CSS被认为是禁忌，所以正确的解决方案最终将它提取到一个类：

.my_text_box {
    width: 50px;
 }

然后：

<input type="text" name="test" value="test" class="my_text_box" />

Answer 2

请勿在HTML中设置显示样式。

使用：

<input class="narrowInput" type="text" name="test" value="test" />

或者：

<input id="narrowInput" type="text" name="test" value="test" />

仅使用“narrowInput”。使用具有业务含义的名称，即：描述输入数据用途的名称。

然后CSS是：

input.narrowInput
{
    width: 50px;
}

或者：

#narrowInput
{
    width: 50px;
}

Answer 3

删除

input[type="text"] 
{
    width: 200px; //THIS
}

或

<input type="text" name="test" value="test" size="5" <--//THIS />

选择使用其中一种进行设计。

输入宽度在css级别和元素级别定义

3 个答案: