チェックボックス、：タグ

Question

前に私が前に使用してカスタムのチェックボックスを作成しようとしていますとimages.Myコードが

<label for="gbx"> 
    <input type="checkbox" name="gbx" id="gbx"> 
    <span>12344</span> 
</label> 

CSSコードここ

input { 
    display: none; 
} 

span:before{ 
    content: "s"; 
    display: block; 
    background-image: url("3_.png"); 
    background-repeat: no-repeat; 
    width: 20px; 
    background-size: cover; 
} 

input:checked+ span:before{ 
    content: "vijay"; 
    display: block; 
    background-image: url("2_.png"); 
    background-repeat: no-repeat; 
    width: 20px; 
    background-size: cover; 
} 

しかし、唯一のコンテンツが存在して表示されています。私はフォントサイズのイメージを減らす場合も、そのサイズを減少させる。どうして？

Answer 1

あなたは間違った方法で試しています。

input[type="checkbox"] {visibility:hidden;} 
 
div label:before {content:'';width:10px;height:10px;background:#fff;border:1px solid red; display:inline-block;margin-right:10px;} 
 
div input[type="checkbox"]:checked ~ label:before{background:red;} 
 

 
.new span:before{content:'';width:10px;height:10px;background:#fff;border:1px solid green; display:inline-block;margin-right:10px;} 
 
.new input[type="checkbox"]:checked ~ span:before {background:green;}

<div> 
 
    <input type="checkbox" id="working" > 
 
    <label for="working" >For my checkbox</label> 
 
</div> 
 

 

 

 
<label class="new"> 
 
    <input type="checkbox"> 
 
    <span>2nd way</span> 
 
</label> 
 

あなたがHTMLを構築する方法をこの

Answer 2

をチェックアウト、あなたはそれぞれlabelとinputにforとid属性を言及する必要はありません。あなたは、HTMLの構造は次のようであるとき、それらを言及する必要があります。

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

しかし、あなたがネストされたとき、彼らは必要ありません。ここで

<label> 
    <input type="checkbox"></input> 
</label> 

はコードです（コメントを確認してください） ： は

input { 
 
    /* don't use display: none */ 
 
    position: absolute; 
 
    visibility: hidden; 
 
    z-index: -1; 
 
} 
 
span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: baseline; 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 1px solid black; 
 
} 
 
:checked + span:before { 
 
    /* no need of mentioning content here again as you alread did in the above code */ 
 
    background-color: skyblue; 
 
}

<label> 
 
    <input type="checkbox" name="gbx"> 
 
    <span>12344</span> 
 
</label>