ラジオボタンのクリックを達成するためにカスタムdivにラベルを張る方法

Question

カスタムラジオボタンを作成しようとしています。

<div style="margin-left:30px;"> 
    <div class='container'> 
<input type="radio" id="rdArts" name="itemcat"> 
    <label for="rdArts">Arts</label>  
    <div class="check"></div> 
</div> 

<div class='container'> 
    <input type="radio" id="rdElectronics" name="itemcat"> 
    <label for="rdElectronics">Electronics</label> 

    <div class="check"></div> 
</div> 

<div class='container'> 
    <input type="radio" id="rdCars" name="itemcat"> 
    <label for="rdCars">Cars</label> 

    <div class="check"></div> 
</div> 
    </div> 

と、このCSS：

.container{ 
    float:left; 
    position:relative; 
    margin-right:20px; 
} 

.container input[type=radio]{ 
    position: absolute; 
    visibility: hidden; 
} 

.container label{ 
    display: block; 
    position: ; 
    font-weight: 300; 
    font-size: 1.2em; 
    padding: 25px 25px 25px 10px; 
    margin: 10px auto; 
    height: 30px; 
    z-index: 9; 
    cursor: pointer; 
    -webkit-transition: all 0.25s linear; 
} 
.container:hover label{ 
    color: #485776; 
} 

.container:hover .check{ 
    border-color: #485776; 
} 

.container:hover .check::border{ 
    background-color: #485776; 
} 
.container .check{ 
    display: block; 
    position: relative; 
    border: 4px solid #333E54; 
    border-radius: 100%; 
    height: 15px; 
    width: 15px; 
    top: -67px; 
    left: -25px; 
    z-index: 5; 
    transition: border .25s linear; 
    -webkit-transition: border .25s linear; 
} 

.container .check::before { 
    display: block; 
    position: relative; 
    content: ''; 
    border-radius: 100%; 
    height: 11px; 
    width: 11px; 
    top: 2px; 
    left: 0px; 
    margin: auto; 
    transition: background 0.25s linear; 
    -webkit-transition: background 0.25s linear; 
} 

input[type=radio]:checked ~ .check::before{ 
    background: #333E54; 
} 

私が取得することができる午前アイテムがhorizo​​ntally.Consider次のHTMLをレイアウトされているように、私は少し微調整したいthisきちんとしたスタイルを見つけましたこの：

唯一の問題は、私は擬似ラジオボタン自体上で動作するようにクリックして取得することはできませんです。私はラベルをクリックする必要があります。理由は、私の場合、ラベルが ".check" divに伸びないからです。 divにオーバーレイさせるために私のレーベルにどのようなスタイルを付けるべきですか？フルHTMLとCSSを見たい場合は、hereです。これは動作するはず

Answer 1

：

私は少し、チェックボックスの画像の上にあることを左にビットを移動する.container labelスタイルを編集しました。

.container{ 
 
    float:left; 
 
    position:relative; 
 
    margin-right:20px; 
 
} 
 

 
.container input[type=radio]{ 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 

 
.container label{ 
 
    display: block; 
 
    position: ; 
 
    font-weight: 300; 
 
    font-size: 1.2em; 
 
    height: 30px; 
 
    z-index: 9; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.25s linear; 
 
     margin: 10px auto 10px -26px; 
 
    padding: 25px 25px 25px 36px; 
 
    position: relative; 
 
} 
 
.container:hover label{ 
 
    color: #485776; 
 
} 
 

 
.container:hover .check{ 
 
    border-color: #485776; 
 
} 
 

 
.container:hover .check::border{ 
 
    background-color: #485776; 
 
} 
 
.container .check{ 
 
    display: block; 
 
    position: relative; 
 
    border: 4px solid #333E54; 
 
    border-radius: 100%; 
 
    height: 15px; 
 
    width: 15px; 
 
    top: -67px; 
 
    left: -25px; 
 
    z-index: 5; 
 
    transition: border .25s linear; 
 
    -webkit-transition: border .25s linear; 
 
} 
 

 
.container .check::before { 
 
    display: block; 
 
    position: relative; 
 
    content: ''; 
 
    border-radius: 100%; 
 
    height: 11px; 
 
    width: 11px; 
 
    top: 2px; 
 
    left: 0px; 
 
    margin: auto; 
 
    transition: background 0.25s linear; 
 
    -webkit-transition: background 0.25s linear; 
 
} 
 

 
input[type=radio]:checked ~ .check::before{ 
 
    background: #333E54; 
 
}

<div style="margin-left:30px;"> 
 
    <div class='container'> 
 
<input type="radio" id="rdArts" name="itemcat"> 
 
    <label for="rdArts">Arts</label>  
 
    <div class="check"></div> 
 
</div> 
 

 
<div class='container'> 
 
    <input type="radio" id="rdElectronics" name="itemcat"> 
 
    <label for="rdElectronics">Electronics</label> 
 

 
    <div class="check"></div> 
 
</div> 
 

 
<div class='container'> 
 
    <input type="radio" id="rdCars" name="itemcat"> 
 
    <label for="rdCars">Cars</label> 
 

 
    <div class="check"></div> 
 
</div> 
 
    </div>