Benutzerdefiniertes Kontrollkästchen, das nur CSS und HTML verwendet

Question

Ich muss ein benutzerdefiniertes Kontrollkästchen nur mit HTML und CSS erstellen. Bisher habe ich:

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>

Die checked Checkbox ein Häkchen mit dem Platz um ihn herum, anstatt nur einen Haken begrenzt sein sollte. Auf der Suche nach Antworten habe ich nur Fälle gefunden, in denen das Häkchen mit einem UTF-8-Zeichen oder einem Bild angezeigt wird. Ich kann keines von beiden für das verwenden, was ich erreichen möchte. Ich kann nur einfaches CSS und HTML verwenden. Irgendwelche Vorschläge?

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

Answer 1

Das Problem ist, dass Sie das gleiche Pseudoelement für den Platz Grenze und das Häkchen verwenden. Die einfache Lösung wäre, weiterhin das :before Pseudoelement für den Rahmen zu verwenden und dann ein :after Pseudoelement für das Häkchen zu verwenden.

Updated Example

Sie würden absolut das :after Pseudoelement Element relativ des Mutter .checkbox-custom Label zu positionieren. Hier

ist der aktualisierte Code:

.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

Meine vorherige Antwort ist falsch, weil es die verwendet ::beforepseudo-element selector on an element that isn't a container. Danke an @BoltClock für den Hinweis auf meinen Fehler. Also kam ich zu einer anderen Lösung, die den Checkbox Hack und den CSS3-Geschwisterwähler (~) verwendet.

Demo bei 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> 

Ich benutze nicht Stackoverflow des "Run-Code-Snippet" Funktionalität, weil es tut etwas komisch, wenn ich es laufen. Ich denke, es ist wegen der Checkbox Hack.