html - 无法使用伪 :hover class 设置边框

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

您需要使用 !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;
}