Kontrollkästchen mit CSS ausblenden

Question

Ich bin neu in HTML und CSS und ich arbeite an einem Projekt, wo ich benutzerdefinierte Kontrollkästchen verwenden möchte. Ich versuche, ein Kontrollkästchen mit einem Bild über CSS zu verbergen. Ich möchte die HTML nicht neu schreiben, wenn ich nicht muss. Ich habe mein Bild um das Kontrollkästchen mit (Anzeige: keine;), aber das hat auch deaktiviert meine Checkbox. Gibt es eine Möglichkeit, meine Checkbox ohne Anzeige nutzbar zu machen?

input[type='checkbox'] 
    { 
    display: none; 
    } 

    input[type='checkbox'] + label 
    { 
    background: url('/Pictures/checkbox_unchecked.jpg')no-repeat; 
    height: 30px; 
    width: 30px; 
    background-size: 100%; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 

    input[type='checkbox']:checked + label 
    { 
    background: url('Pictures/checkbox_checked.jpg') no-repeat; 
    height: 50px; 
    width: 200px; 
    background-size: 100%; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 

Answer 1

Sie können die Deckkraft des Kontrollkästchens auf 0 setzen. Dies macht es immer noch anklickbar.

Beispiel (im schwarzen Rechteck klicken):

#checkbox { 
 
    opacity: 0; 
 
} 
 
#container { 
 
    border: 2px solid black; 
 
    width: 20px;; 
 
}

<div id="container"> 
 
    <input type="checkbox" id="checkbox" onclick="alert('hello')"/> 
 
</div>

Answer 2

label input { 
 
    opacity: 0; 
 
    width: 0; 
 
    height: 0; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
label span.y { 
 
    display: none; 
 
} 
 

 
label span.n { 
 
    display: inline; 
 
} 
 

 
label input:checked ~span.y { 
 
    display: inline; 
 
} 
 

 
label input:checked ~span.n { 
 
    display: none; 
 
}

<label> 
 
    <input type="checkbox" value="1"> 
 
    <span class="y">Checked!</span> 
 
    <span class="n">Click me!</span> 
 
</label>

Gerade span.y und span.n. auf Ihre Elemente ändern (Bilder oder etwas anderes).

Answer 3

input[type='checkbox'] { 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
} 
 
input[type='checkbox'] + label { 
 
    background: url('http://lorempixel.com/30/30/') no-repeat; 
 
    height: 30px; 
 
    width: 30px; 
 
    background-size: cover; 
 
    display: inline-block; 
 
} 
 
input[type='checkbox']:checked + label { 
 
    background: url('http://lorempixel.com/50/200/') no-repeat; 
 
    height: 50px; 
 
    width: 200px; 
 
    background-size: cover; 
 
    display: inline-block; 
 
}

<input type="checkbox" id="check" /> 
 
<label for="check"></label>