は、CSSを使用してチェックボックスでカスタマイズされたティック、クロス、マイナス記号のアイコンを表示します。

Question

CSSを使用して、チェックボックスでチェックマークを付けることができます。

注：アイコン（例：font awesome）や画像は使用していません。

私を助けてください。

画像が添付されています。

チェックボックス3つの状態の画像

Answer 1

は、あなたが今までやっていることのあなたのコードを提供

label.checkbox input[type="checkbox"] {display:none;} 
label.checkbox span { 
    display:inline-block; 
    border:2px solid #BBB; 
    border-radius:10px; 
    width:25px; 
    height:25px; 
    background:#C33; 
    vertical-align:middle; 
    margin:3px; 
    position: relative; 
    transition:width 0.1s, height 0.1s, margin 0.1s; 
} 
label.checkbox :checked + span { 
    background:#6F6; 
    width:27px; 
    height:27px; 
    margin: 2px; 
} 
label.checkbox :checked + span:after { 
    content: '\2714'; 
    font-size: 20px; 
    position: absolute; 
    top: -2px; 
    left: 5px; 
    color: #99a1a7; 
} 

<label class="checkbox"> 
    <input type="checkbox"/> 
    <span></span> 
    I like cake 
</label>