Como quitar el borde azul que aparece al hacer focus en los inputs y selects bootstrap 4 2020

Author : Jhon

Publicado : 10 marzo, 2020

Para eliminar el borde azul de los campos input o select de un bootstrap 4 debemos de apuntar al selector  focus por esto si tenemos un  campo input o un campo select deberemos de escribir el siguiente codigo css

 input:focus, select:focus, select, input.form-control:focus {

            outline:none !important;

            outline-width: 0 !important;

            box-shadow: none;

            -moz-box-shadow: none;

            -webkit-box-shadow: none;

        }

También podemos cambiarlos de color así:

 

  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;

}
Esto deberia de funcionar en todos los navegadores y eliminar el borde azul que se produce al hacer click en un input o campo select, en mi caso era quitar este focus de mi campo select
<select class="form-control custom-select select-lenguaje mt-3">

    <option selected>ES</option>

    <option value="1">EN</option>

    <option value="2">CA</option>

    <option value="3">FR</option>

    <option value="3">IT</option>

</select>
Me funciono perfectamente.

 

Deja una respuesta

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