CODEWITHSUNDEEP
css
alim1990
alim1990

Reputation: 4972

Changing input type number and select tag border color using css

I am trying to change the text color that user types inside text box, and the border of all text boxes from normal to blue.

EDIT

I need the text boxes, input number, drop down lists to have a blue border on page load, and the text typed inside is blue too

I tried this:

input[type="text"] {
    color: #0090ff;
    border-color: #0090ff;

}
input[type=number]:-webkit-inner-spin-button {
    color: #0090ff;
    border-color: #0090ff;
}

.editor-field select 
 {
    color: #0090ff;
    border-color: #0090ff;
}

The problem now that only the input type=text border is blue, but the text isn't, and the input type="number" and the are not showing any changes.

Upvotes: 0

Views: 1402

Answers (3)

LKG
LKG

Reputation: 4192

Use :focus to when user place value

Working fiddle

fiddle link

input[type="text"] {
color: #0090ff;
border:1px solid #0090ff;

}
input[type=number] {
color: #0090ff;
border:1px solid #0090ff;
}

/* When user focus */

input[type="text"]:focus, input[type=number]:focus, select:focus {
color: tomato;
border:1px solid tomato;
}

select  {
color: #0090ff;
border:1px solid #0090ff;
min-width:150px;
}
<input type="text">
<input type="number" name="" id="">
<select>
   <option>1</option>
   <option>1</option>
   <option>1</option>
 </select>

Upvotes: 1

Okx
Okx

Reputation: 363

Use the :focus selector.

input[type="text"] {
    color: #0090ff;
    border-color: #0090ff;

}

input[type="text"]:focus {
    color: initial;
    border-color: initial;

}
<input type="text">

Upvotes: 1

Mr.Pandya
Mr.Pandya

Reputation: 2038

input[type="text"] {
    color: #0090ff;
    border-color: #0090ff;

}
input[type=number]{
    color: #0090ff;
    border-color: #0090ff;
}

Upvotes: 0

Related Questions