2

Por qué sucede que al cliquear el checkbox, se le ve un cuadro a su alrededor?

input[type=checkbox] {
    float: left !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    background: #333!important;
    border: 1px solid #333!important;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s;
}
input[type=checkbox]:checked {
    background-color: #1565C0!important;
    border-color: #1565C0!important;
    background-image: url('http://snova.us/data/img/checked.png')!important;
    background-size: 10px!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
  <input type="checkbox" style="border: 0px;" onchange="setNames(!$(this).is(':checked'));"> Sin nombres</label>

1
  • Es la propiedad outline que pone el navegador cuando un elemento de formulario tiene el foco (es por accesibilidad, no se suele recomendar eliminarlo). Tampoco ocurre en todos los navegadores (supongo que estás probando en Chrome). Si quieres quitarlo la solución te la da @aldanux en su respuesta
    – user7176
    el 12 jul. 2017 a las 8:11

1 respuesta 1

5

Lo arreglas agregando la propiedad outline

input[type=checkbox] {
    outline: 0; /* <<< */
    float: left !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    background: #333!important;
    border: 1px solid #333!important;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s;
}
input[type=checkbox]:checked {        
    background-color: #1565C0!important;
    border-color: #1565C0!important;
    background-image: url('http://snova.us/data/img/checked.png')!important;
    background-size: 10px!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
  <input type="checkbox" style="border: 0px;" onchange="setNames(!$(this).is(':checked'));"> Sin nombres</label>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.