Eliminar o cambiar el borde de color de los input y textarea con foco

por

Cambiar el borde de color en cualquiera de los campos de nuestro formulario es una tarea muy sencilla que seguro en alguna ocasión nos hemos planteado. ¡Sí! hablamos de ese borde con sombra que afecta en el focus de un input o textarea en un formulario, ya sea un formulario de contacto, de recogida de información del usuario o para una newsletter.

Eliminar o cambiar el borde de color de los input y textarea con foco

La solución es muy simple y te la paso a continuación.

Cambiar el color y la sombra de input y textarea

textarea:focus, input:focus, input[type]:focus {
    border-color: rgb(255, 144, 0);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
}
Eliminar o cambiar el borde de color de los input y textarea con foco

Eliminar el color del campo de input y textarea

Si de lo contrario tan solo queremos eliminar cualquier sombra al hacer focus en el campo del formulario:

textarea:focus, input:focus, input[type]:focus {
    outline: 0 none;
}
Eliminar o cambiar el borde de color de los input y textarea con foco

Espero haberte ayudado en este sencillo post! 🙂

17 comentarios en «Eliminar o cambiar el borde de color de los input y textarea con foco»

  6. Hola, tengo un aporte, esto lo descubri hace tiempo, esta es la manera de sobreescribir los estilos de bootstrap que trae por defecto para ese border cuando el input tiene un active.

    para checkbox y input-radio:
    .custom-control-input:checked ~ .custom-control-label::before {
    background: color;
    border-color: color;
    }

    Para input, select y textarea:
    .form-control:focus, .custom-select:focus, .custom-control-input:focus ~ .custom-control-label::before,
    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #17a2b8;
    box-shadow: 0 0 0 0.2rem rgba(23, 163, 184, 0.4);
    }

Los comentarios están cerrados.