Change the color of the selection around the focused text box

Question

I am trying to change the highlight color around my text box when a user enters data. Right now, when a user selects it on my machine, it turns blue. I would like it to be red. Is it possible to change the highlight color around a focused text field? I tried using -moz-select and select in my css, but it does not work.

#myTextBox { border: 3px solid gray;/*background img not available, added border to see textbox*/ background: transparent url(IMAGEHERE.png); width: 368px; height: 33px; color: silver; font-size: 22px; padding-left: 10px; } ::-moz-selection { background-color: #dd2020; color: #fff; } ::selection { background-color: #dd2020; color: #fff; } 

jsFiddle

Answer 1

Try this code:

 #myTextBox { border: 3px solid gray; width: 368px; height: 33px; color: silver; font-size: 22px; padding-left: 10px; border:2px solid red; border-radius:7px; font-size:20px; padding:5px; } #myTextBox:focus{ outline:none; border-color:blue; box-shadow:0 0 10px blue; } 

Demo

He changes red to blue for focus.