CSSでチェックボックスを非表示にする

Question

私はhtmlとcssを初めて使用しています。私はカスタムチェックボックスを使用するプロジェクトで作業しています。 私はcss経由で画像付きのチェックボックスを隠そうとしています。私がしなければhtmlを書き直したくない。 Iveは（display：none;）を使用してチェックボックスを覆うように画像を取得しましたが、これもチェックボックスを無効にしました。チェックボックスを表示せずに使用できるようにする方法はありますか？

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

チェックボックスの不透明度を0に設定することができます。これにより、クリック可能になります。

例（黒の四角形の内側をクリックします）：

#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>

ちょうどあなたの要素（画像や他の何か）にspan.yとspan.n.を変更。

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>