Casella di controllo personalizzata usando solo CSS e HTML

Question

Ho bisogno di creare una casella di controllo personalizzata usando solo html e CSS. Finora ho:

HTML/CSS:

.checkbox-custom { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
.checkbox-custom, 
 
.checkbox-custom-label { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 5px; 
 
    cursor: pointer; 
 
} 
 
.checkbox-custom + .checkbox-custom-label:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    border: 2px solid #ddd; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    padding: 2px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
} 
 
.checkbox-custom:checked + .checkbox-custom-label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 1px; 
 
    height: 5px; 
 
    border: solid blue; 
 
    border-width: 0 3px 3px 0; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-radius: 0px; 
 
    margin: 0px 15px 5px 5px; 
 
}

<div> 
 
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> 
 
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label> 
 
</div> 
 
<div> 
 
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"> 
 
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label> 
 
</div>

La casella checked dovrebbe essere un segno di spunta con la piazza delimitata intorno ad esso invece di un segno di spunta. Alla ricerca di risposte, ho trovato solo casi in cui il segno di spunta viene visualizzato utilizzando un carattere UTF-8 o un'immagine. Non sono in grado di utilizzare nessuno di questi per quello che sto cercando di realizzare. Sono solo in grado di utilizzare semplici CSS e HTML. Eventuali suggerimenti?

codepen qui: http://codepen.io/alisontague/pen/EPXagW?editors=110

Answer 1

Il problema è che si sta utilizzando lo stesso elemento pseudo per il bordo piazza e il segno di spunta. La soluzione semplice sarebbe continuare a utilizzare lo pseudo elemento :before per il bordo e quindi utilizzare uno pseudo elemento :after per il segno di spunta.

Updated Example

Si dovrà posizionare assolutamente l'elemento :after pseudo relativa all'elemento label genitore .checkbox-custom.

Ecco il codice aggiornato:

.checkbox-custom { 
 
    display: none; 
 
} 
 
.checkbox-custom-label { 
 
    display: inline-block; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    margin: 5px; 
 
    cursor: pointer; 
 
} 
 
.checkbox-custom + .checkbox-custom-label:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    border: 2px solid #ddd; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; height: 10px; 
 
    padding: 2px; margin-right: 10px; 
 
} 
 
.checkbox-custom:checked + .checkbox-custom-label:after { 
 
    content: ""; 
 
    padding: 2px; 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 5px; 
 
    border: solid blue; 
 
    border-width: 0 3px 3px 0; 
 
    transform: rotate(45deg); 
 
    top: 2px; left: 5px; 
 
}

<h3>Checkboxes</h3> 
 
<div> 
 
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> 
 
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label> 
 
</div> 
 
<div> 
 
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"> 
 
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label> 
 
</div>

Answer 2

La mia risposta precedente è sbagliata perché utilizza il ::beforepseudo-element selector on an element that isn't a container. Grazie a @BoltClock per aver segnalato il mio errore. Così, mi è venuta in mente un'altra soluzione che utilizza il Checkbox Hack e il selettore di pari livello CSS3 (~).

Demo a CodePen

input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
input[type=checkbox] ~ label::before { 
    content: '\2713'; 
    display: inline-block; 
    text-align: center; 
    color: white; 
    line-height: 1em; 
    width: 1em; 
    height: 1em; 
    border: 1px inset silver; 
    border-radius: 0.25em; 
    margin: 0.25em; 
} 
input[type=checkbox]:checked ~ label::before { 
    color: black; 
} 

<form name="checkbox-form" id="checkbox-form"> 
    <div> 
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> 
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label> 
    </div> 
    <div> 
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"> 
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label> 
    </div> 
</form> 

non ho usato la funzionalità "Run Codice-Snippet" di StackOverflow perché fa qualcosa di strano quando l'eseguo. Penso che sia per via della casella di controllo.