Why does this happen with the buttons?

Question

Why does this happen with the buttons?

Navigation

#1 by (5 votes)

2

Why does it happen that when you click on the checkbox, you see a box around it?

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>

css3

asked by Eduardo Sebastian 12.07.2017 в 09:48

source

1 answer

The destructor of the class is called after instantiating object with its copy constructor Fill form field with the value of another field

score 5 · Accepted Answer

Fix it by adding the property 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>