How to style the currently selected field on a web page

The Chrome browser puts an orange high开发者_C百科light around the currently selected input element, how can I disable this highlight or change its color?

---

I think that's:

.myInput:focus /*or # depending*/
{
   outline: #f00; /*or outline: none;*/
}

I think.

---

You can disable it withoutline: 0 or outline: none.

You can also change the color with outline-color: red (or any other color).

---

If you right click on the selected input and select 'Inspect element' you'll be able to see the styles applied by default, look for the user agent stylesheet in the styles tab on the right. This is the relevant bit:

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px;
}
:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

---

Posible layout:

:focus{
   outline-color:white; 
}
[required]{
    border-color: #FFF;
    -webkit-box-shadow: 0 0 3px rgba(51, 153, 255, .5);
}
:invalid {
    border-color: #606077;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
}