Question

我正在尝试使用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>

Answer 1

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

#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;
}

Answer 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将覆盖任何其他样式定义。

Answer 3

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

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

无法使用伪：悬停类设置边框

3 个答案: