Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of selection around focused textbox

Tags:

html

css

textbox

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

enter image description here

like image 786
atrljoe Avatar asked Jan 15 '23 21:01

atrljoe


1 Answers

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.

like image 193
Gurpreet Singh Avatar answered Jan 17 '23 18:01

Gurpreet Singh