Aktivieren Sie das Kontrollkästchen, das über den Rahmen hinausgeht.

Question

Wenn das Kontrollkästchen ausgewählt ist, möchten wir ein Häkchen anwenden, das über das Kontrollkästchen hinausgeht. Das Anwenden des Hintergrundbilds funktioniert nicht, da es nicht über den Ankreuzbereich hinausreichen kann.

Also dachte ich über das Erstellen von geschachtelten Spannen und das Anwenden von Hintergrundbild auf die äußere Spannweite. Das Tick-Bild wird jedoch durch die innere Spanne verdeckt.

Schnell jsfiddle (zeigt nicht das Bild) ist here

<span class="outer"> 
    <span class="inner"> 
    </span> 
</span> 

span.inner{ 
    display:inline-block; 
    width:10px; 
    height:10px; 
    border:1px solid; 
    background-color:yellow; 
} 

span.outer{ 
    display:inline-block; 
    width:20px; 
    height:20px; 
    border:1px solid red; 
    box-sizing:border-box; 
    padding-left:3px; 
    padding-top:1px; 
    background-color:orange; 
    background-image:url('sometickimage.png'); 
} 

Grundsätzlich wird die Zecke durch die Spanne versteckt mit gelbem Hintergrund.

Gibt es einen Weg, dies ohne absolute Positionierung zu erreichen?

Answer 1

Hier ist ein Beispiel Klassen CSS Pseudo verwenden. Tweak nach Ihrem Bedarf!

* { 
 
    font-family: arial; 
 
} 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
label { 
 
    display: inline-block; 
 
    color: #666666; 
 
    cursor: pointer; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin: 7px 10px; 
 
    font-size: 16px; 
 
    line-height: 20px; 
 
} 
 
label:before { 
 
    line-height: 20px; 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 10px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -1px; 
 
    border-radius: 3px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #aaaaaa; 
 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
 
} 
 
input[type=checkbox]:checked + label:before, 
 
label:hover:before { 
 
    content: "\2713"; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
 
    font-size: 30px; 
 
    color: #aaaaaa; 
 
    text-align: center; 
 
    line-height: 12px; 
 
    width: 18px; 
 
    padding-left: 2px; 
 
} 
 
label:hover:before { 
 
    color: #d5d5d5; 
 
    text-shadow: none; 
 
}

<div class="checkbox"> 
 
    <input id="check1" type="checkbox" name="check" value="Morning"> 
 
    <label for="check1">Morning</label> 
 
    <br> 
 
    <input id="check2" type="checkbox" name="check" value="Evening"> 
 
    <label for="check2">Evening</label> 
 
</div>

Answer 2

versuchen, etwas wie folgt aus:

<input type="checkbox" id="checkbox69" class="css-checkbox lrg" checked="checked"> 
<label for="checkbox69" name="checkbox69_lbl" class="css-label lrg out"> A tick which is going out of the checkbox </label> 

Mit dem CSS verbunden:

label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
} 

input[type=checkbox].css-checkbox { 
    position: absolute; 
overflow: hidden; 
clip: rect(0 0 0 0); 
height:1px; 
width:1px; 
margin:-1px; 
padding:0; 
border:0; 
} 

input[type=checkbox].css-checkbox + label.css-label { 
padding-left:20px; 
height:15px; 
display:inline-block; 
line-height:15px; 
background-repeat:no-repeat; 
background-position: 0 0; 
font-size:15px; 
vertical-align:middle; 
cursor:pointer; 
} 

input[type=checkbox].css-checkbox:checked + label.css-label { 
background-position: 0 -15px; 
} 

.css-label{ 
background-image:url(http://csscheckbox.com/checkboxes/dark-check-  green.png); 
} 

.vlad{background-image:url(http://csscheckbox.com/checkboxes/vlad.png);} 



input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{ 

background-position: 0 -16px; 
} 
input[type=checkbox].css-checkbox.lrg + label.css-label.lrg { 
padding-left:22px; 
height:20px; 
display:inline-block; 
line-height:20px; 
background-repeat:no-repeat; 
background-position: 0 0; 
font-size:15px; 
vertical-align:middle; 
cursor:pointer; 
} 

input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{ 

background-position: 0 -20px; 
}