: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

JAM Graphic Noticias: diseño de D Talentos tienda en línea

Hablamos un poco de la actualidad de JAM Graphic, mi despacho de diseño gráfico. Estos últimos días dedique mi tiempo en trabajar en propuestas de diseño para la tienda en línea D Talentos. Tienda en la cual se vendrs productos de talentos independientes mexicanos.

El cliente aprobó los bocetos de la arquitectura de las páginas, etapa en la cual definimos donde va tal y tal contenido, a partir de los cuales me apoyo para crear los diseños. 

Trabaje en colaboración estrecha con el cliente con el fin de estar segura proponer una imagen que corresponda a la visión que tiene de su negocio. 

En la página facebook de JAM Graphic podrás ver más muestras

de este trabajo.