Wie decke ich das Etikett über ein benutzerdefiniertes div, um den Radio Button zu erreichen

Question

Ich versuche ein benutzerdefiniertes Optionsfeld zu erstellen. Ich habe this ordentlich Stil gefunden, den ich ein wenig optimieren will, so dass Elemente werden angelegt horizontally.Consider die folgende html:

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

und diese 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; 
} 

ich in der Lage bin zu erhalten dies:

Das einzige Problem ist, ich kann nicht klicken Sie sich auf dem Pseudo-Optionsfeld zu arbeiten. Ich muss auf das Etikett klicken. Und der Grund ist, weil in meinem Fall Label dehnt sich nicht auf das ".check" div. Welchen Stil sollte ich meinem Label geben, damit es das div überlagert? Wenn Sie den vollen HTML-Code und CSS sehen möchten, ist here es.

Answer 1

Dies sollte funktionieren:

ich die .container label Stil leicht bearbeitet ein wenig nach links zu bewegen, über die Checkbox Bilder zu sein.

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