CODEWITHSUNDEEP
htmlcsshoverfocus
San Bergam
San Bergam

Reputation: 13

How can I prevent hover styles when element is focused

I've created an element, and when you hover over it, the border color changes from the original. There is also another color that the border changes to when the border is focused.
HTML:

<input id="colorchange" type="text">

CSS:

#colorchange {border: thin solid white;}
#colorchange:hover {border: thin solid grey;}
#colorchange:focus {border: thin solid black;}

The problem is that I want the border to stay black when the element is focused, even if the user is hovering over it. Unfortunately, when I hover over the element when it is focused, the element becomes gray, though I want it to stay black.
How can I do this?

Upvotes: 0

Views: 3172

Answers (4)

JoeFlash
JoeFlash

Reputation: 74

The best way to do the styling is give one class higher priority over another. Avoid using !important as it creates issues creating rule priorities.

Using simple class names instead of ID you could do:

.colorchange:hover {border: thin solid grey;}
.colorchange.colorchange:focus {border: thin solid black;}

The double class name declaration is allowed and give the second class higher priority.

Another way of setting priorities is assigning specificity. One rule being more specific than the other:

#colorchange:hover {border: thin solid grey;}
body #colorchange:focus {border: thin solid black;}

Upvotes: 1

Jay Patel
Jay Patel

Reputation: 5793

set !important property on hover style

#colorchange {border: thin solid white;}
#colorchange:hover {border: thin solid grey !important;}
#colorchange:focus {border: thin solid black;}

Upvotes: 0

benomatis
benomatis

Reputation: 5633

Simply use the same setting for the hover of the element in your css by adding them on the same line, separated by comma:

/* These two element selectors are now on the same line, separated by comma */
#colorchange, #colorchange:hover { border: thin solid white; }

#colorchange:focus { border: thin solid black; }

HERE IS A DEMO

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

try

#colorchange input[type='text']:focus{border: thin solid black;}

Upvotes: 0

Related Questions