Campo de texto input con borde focus azul

Para poner un campo de texto input con el borde azul por ejemplo o primero que tenemos que hace es desactivar el focus que traen por defecto los campos de texto que normalmente es amarillo o por lo menos así se ve en la mayoria de los navegadores.


Esto se hace de la siguiente manera aplicándolo a nuestro estilos css o directamente al input mediante un style:

input: outline: none;

Con eso desactivamos el foco por defecto vale ahora tenemos que crear una clase focus por ejemplo supongamos que el campo tiene la clase “.campotext” pues agregamos lo siguiente:

.campotext:focus {
border:1px solid #06c;
}
 
/* Tambien puedes directamente a todos los inputu así */
 
input:focus {
border:1px solid #06c;
}

Ahora cuando nos situemos dentro del campo este se vera en azul o el color que queramos para cambiarlo pon tu color donde esta el #06c y listo.
Editado