html - 焦点上边框颜色不改变

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