I am trying to change the color of the selection around my textbox when a user is inputting data. Right now when the user selects it on my machine it becomes blue. I would like this to be red. Is it possible to change the color of the selection around a focused textbox? I tried using -moz-selection and selection in my css but it doesnt 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
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
It changes red to blue on focus.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With