Quitar el borde de los input con foco en Safari y Chrome

Cuando se utiliza por primera vez un navegador como Chrome o Safari, estoy seguro de que una de las cosas que más se notan es el resplandor / borde. La primera impresión es que ayuda a la accesibilidad, que es un efecto lógico y muchas veces necesario, y que a mucha gente con poca experiéncia le hará un favor.
Pero si tu eres quien maqueta la página y optas por aplicar un efecto propio con css, al mezclarse con el propio del navegador puede que parezca algo extraño y quede mal, pero ese efecto se puede evitar con el atributo outline de CSS.

focos

Igual que se hacía para evitar el punteado de los enlaces que se implementó en nosecual versión de Firefox (3.1 creo).

#signup .text:focus{
	outline:0px;
}

Comentarios (48)

Gracias. Pero también sucede que el textbox aumenta un poco de tamaño cuando está resaltado, parece que se le agrega una sobra o difuminado que a pesar de no tener el outline, hace que se note el resaltado… habrá forma de quitarlo?

Muchisimas gracias por el aporte, me estaba poniendo de los nervios ese efecto de borde maligno. Que será propicio para personas con algun tipo de incapacidad visual, pero que a mi personalmente me descuadraba la web totalmente. Cabe destacar, que me he vuelto loco porque pensaba que bastaba con poner :focus {border:none} y menos mal que al fin encontré la solución. Enhorabuena por este blog!

¿Cómo hago para que eso solo se aplique a por ejemplo el borde superior, el derecho y el izquierdo, exceptuando el inferior?

Si lo tienes ya modificado con Bootstrap o algo así, si. Además hay que tener en cuenta que outline era la propiedad que usaban hace casi 9 años cuando lo escribí. Ahora no estoy seguro, pero diría que sí.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.