html - How can I prevent hover styles when element is focused -

i've created element, , when hover on it, border color changes original. there color border changes when border 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 want border stay black when element focused, if user hovering on it. unfortunately, when hover on element when focused, element becomes gray, though want stay black.
how can this?

try

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