цвет границы не меняется на фокусе

Question

Следующий мой код, и граница не меняется в фокусе, что я делаю неправильно? Ive пробовал много вещей, но ничего не работает

<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-файл лучше, чем встроенные стили.