边框颜色在焦点上没有变化

Question

以下是我的代码，边框没有改变焦点，我做错了什么？我尝试了很多东西，但没有任何工作

<input type="text" spellcheck="false" data-placement="top" id="writeWord" autocorrect="off" autocapitalize="off" maxlength="200" style="width: 230px;border: 0;border-bottom: 2px solid #C8C6C6;border-radius: 0;color:#6e572f;font-size:24px;font-weight:500;">

#writeWord:focus{ outline: 0; border-color:#ea6e01;}

http://jsfiddle.net/brdrn4d3/

Answer 1

这是因为inline styling is more specific而不是样式表中的样式。

您可以使用以下内容：

Updated Example

#writeWord {
    border: none;
    border-bottom: 2px solid #C8C6C6;
}
#writeWord:focus {
    outline: 0;
    border: 1px solid #ea6e01;
}

Answer 2

只需在您的样式中添加!important声明：

#writeWord:focus{ outline: 0; border-color:#ea6e01 !important;}

但请记住，在.css文件中声明CSS样式优于内联样式。