CODEWITHSUNDEEP
htmlcsscolorsborder
user7209949
user7209949

Reputation:

Change the color of a input-field when selected

i haven't found the code yet. Maybe someone can help me? I want to change the border-color of a input type="text" field when it is selected. Atm the border gets blue when i click in such a field. I tried border-color but it didn't work. I am new to css and html. 

<input type="text" placeholder="Name...">

Thanks!

Edit: I don't talk about the background-color! I just want to change the color of the mark around the box thats visible when the box gets selected.

Upvotes: 15

Views: 82154

Answers (3)

amol patil
amol patil

Reputation: 11

Try this example after click input then color change:

<style>
    input:focus {
       color: red;
       outline: 2px solid orange;  
    }

    input.visited {
       color: red;
       outline: 2px solid orange;  
    }
 </style>

A working example can be found here.

Upvotes: 0

amol patil
amol patil

Reputation: 11

enter code here


input:focus {
 color: red;
 outline: 2px solid orange;  
}
input.visited {
  color: red;
 outline: 2px solid orange;  
}
<form>
  First name: <input type="text" name="firstname" onchange="this.className=(this.value=='')?'':'visited';"><br>
  Last name: <input type="text" onchange="this.className=(this.value=='')?'':'visited';" name="lastname">
</form>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

Try with :focus and go for outline

input[type=text]:focus{
  outline: 2px solid orange;     /* oranges! yey */
}
<input type="text" placeholder="Name...">

Or if you want more freedom (since outline is squared) set outline to none and play with border or box-shadow. Just use something, for accessibility.

Using box-shadow:

input[type=text] {
  border: none;        /* Remove default borders */
  padding: 4px 8px;
  border-radius: 12px; /* Sadly outline does not round! therefore...*/
}
input[type=text]:focus{
  outline: none;      /* Remove default outline and use border or box-shadow */
  box-shadow: 0 0 0 2px orange; /* Full freedom. (works also with border-radius) */
}
<input type="text" placeholder="Name...">

Upvotes: 38

Related Questions