4

我正在尝试使用 css 设置文本框的边框，但我无法做到。这是我的代码：

<input type="email" id="email" style="display:inline-block;margin-top:10px;width:180px;height:30px;border:1px solid #cccccc;border-radius:1px;padding-left:8;padding-right:8;">
<style>
#email:hover
{
box-shadow: inset 0 0 4px rgba(192,192,192,0.4);
border:1px solid #bbbbbb;
}
</style>

但是，当我在内联 css 中指定没有边框，然后尝试在 :hover 伪类中设置边框时，它就可以工作了。像这样：

<input type="email" id="email" style="display:inline-block;margintop:10px;width:180px;height:30px;border-radius:1px;padding-left:8;padding-right:8;">
<style>
#email:hover
{
box-shadow: inset 0 0 4px rgba(192,192,192,0.4); 
border:1px solid #bbbbbb;
}
</style>
4

3 回答 3

4

你需要!important在你的 CSS 规则中使用：

#email:hover
{
    box-shadow: inset 0 0 4px rgba(192,192,192,0.4); 
    border:1px solid #bbbbbb !important;
}

因为内联 CSS 总是覆盖非!important规则。

但我鼓励您不要使用这么大的内联样式并将其写入<style>块或更好地写入外部文件，因为这样可以更容易地覆盖您的规则而无需!important：

#email {
    display:inline-block;
    margin-top:10px;
    width:180px;
    height:30px;
    border:1px solid #cccccc;
    border-radius:1px;
    padding-left:8;
    padding-right:8;
}

#email:hover
{
    box-shadow: inset 0 0 4px rgba(192,192,192,0.4); 
    border:1px solid #bbbbbb;
}
于 2013-06-08T21:00:09.143 回答
2

内联 CSS 的优先级高于样式表/样式标签的优先级。解决此问题的一种方法（不推荐）是将您的<style>样式更改为：

<style>
  #email:hover {
    box-shadow: inset 0 0 4px rgba(192,192,192,0.4); 
    border: 1px solid #bbbbbb !important;
  }
</style>

!important将覆盖任何其他样式定义。

于 2013-06-08T21:01:02.847 回答
2

因为内联style是最重要的。如果您希望任何其他规则压倒您的内联样式，请使用!important

 #email:hover
   {
    box-shadow: inset 0 0 4px rgba(192,192,192,0.4);
    border:1px solid #bbbbbb;!important
  }
于 2013-06-08T21:04:08.533 回答