CODEWITHSUNDEEP
css
David542
David542

Reputation: 110592

Change border color of text-input

To remove the border of a text-input when it is active, I can do:

textarea:focus, input:focus{
    outline: 0;
}

How would I then add a border-color of my own on it? For example:

textarea:focus, input:focus{
    outline: 0;
    border: 1px solid red;
}

Upvotes: 3

Views: 4617

Answers (6)

Etienne
Etienne

Reputation: 2287

On focus, I recommend to use the outline and/or text-shadow properties. I you use Modernizr you can use both, so old browsers that do not support the text-shadow can have on focus effect.

textarea:focus, input:focus {
    outline: 0;
}

textarea:focus, input:focus {
    box-shadow: 0px 0px 3px red;
}

.no-boxshadow textarea:focus, .no-boxshadow input:focus {
    outline: 1px solid red;
}
<textarea></textarea><br />

I you prefer to use the borders instead, I recommend you to specify a default border styling on your element, to avoid a flick effect on focus.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46825

The relevant property to change is border, outline has no effect.

Please see below:

textarea, input {
    border: 1px solid blue;
}
textarea:focus, input:focus {
    border: 1px solid red;
}
<textarea></textarea>
<br><br>
<input type="text" value="test">

Upvotes: 0

Alex Char
Alex Char

Reputation: 33238

You can try this:

textarea:focus {
    outline: none;
    box-shadow: 0px 0px 5px red;/*here change the color*/
    border:1px solid red;/*here change the color*/
}
textarea:focus:hover {
    outline: none;
    box-shadow: 0px 0px 5px red;/*here change the color*/
    border:1px solid red;/*here change the color*/
    border-radius:0;
}
<textarea></textarea>

Upvotes: 7

Cyril Beeckman
Cyril Beeckman

Reputation: 1278

textarea{
  outline: 1;
  outline-color: red;
}
<textarea></textarea>

Check all feature of outline property : http://www.w3schools.com/css/css_outline.asp

Upvotes: 0

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1301

This works fine for me. Changes border color on focus.

input:focus{
    outline: 0;
    border:1px solid #0f0;
}

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

Please check this jsFiddle.

CSS:

input:focus { 
    outline: none !important;
    border:1px solid red;
}

textarea:focus {
    outline: none !important;
    border:1px solid red;
}

Upvotes: 2

Related Questions