:focus {outline, porque es importante no suprimirlo sino atribuirle los estilos correctos

Estamos acostumbrados, por cuestión de estética, quitar la propiedad outline, que depende del selector :focus

En efecto, por default los navegadores imponen un grueso halo azul alrededor de un elemento hijo de la etiqueta <from>:

Pero al eliminar el outline a través de los estilos

:focus {
   outline: 0;
   /* or */
   outline: none;
}

quitamos del website una funcionalidad muy importante para la gente acostumbrada a navegar con el teclado, y para los con problema de visión.

Así es muy recomendable que al lugar de suprimirlo, customizar el estilo.

De esa manera por ejemplo:

:focus {
 outline: thin dotted #333333 !important;
 outline: 5px auto -webkit-focus-ring-color !important;
 outline-offset: -2px;
}

Nota: el estilo por default de Chrome:

:focus {
   /* -webkit-focus-ring-color = '#5B9DD9' */
   outline: -webkit-focus-ring-color auto 5px;
}

El de Firefox:

:focus {
  /*  outline:

1px dotted #212121

; } 

Customizar los estilos del dropdown de

Este plugin de JQuery te permite de manera fácil y limpia customizar el dropdow de la etiqueta <select>.

Sí es una algo que puedes fácilmente realizar al utilizar el .dropdown de Bootstrap. 

El problema de esta opción es que, según experiencia de los desarrolladores con los cuales trabajo, complica la implementación de los datos. Entonces tuve que cambiar los <div class=“dropdown”></div> a <select>.

No quede satisfecha de la visualización del dropdown del <select>, y después de intentar forzar los etilos a otros, cosa que resultó imposible por el avance de customización que buscaba alcanzar, encontré este plugin http://silviomoreto.github.io/bootstrap-select/.


Para los principiantes:

Del archivo que descargas, los que realmente funcionan considerando que ya tienes instalado Bootstrap y jQuery, son los que se encuentran en la carpeta dist.

También es necesario que añades las líneas siguientes al html (el css en el <head> y el script justo antes de </body>)

 <link rel=“stylesheet” href=“dist/css/bootstrap-select.css”>

 <script src=“dist/js/bootstrap-select.js”></script>

EN caso que tengas duda es muy recomendable revisar como está hecho el archivo “test.html