CODEWITHSUNDEEP
htmlcss
Jake
Jake

Reputation: 3486

border color not changing on focus

The following is my code and the border isnt changing on focus, what am i doing wrong? Ive tried lots of things but nothing is working

<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/

Upvotes: 3

Views: 1388

Answers (2)

StaleMartyr
StaleMartyr

Reputation: 778

Just add an !important declaration in your style :

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

But keep in mind that declaring CSS styles in a .css file is better than inline styles.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240858

It's because the inline styling is more specific than the styling in your stylesheet.

You could use the following:

Updated Example

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

Upvotes: 2

Related Questions