Extend chechbox klickbaren Bereich ohne Etikett

Question

Mein Code sieht wie folgt aus:

<div class="hovereffect"> 
    <img class="img-responsive" src="/some-image" alt=""> 
    <input type="checkbox" class="img-checkbox"> 
</div> 

.hovereffect { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 20px; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    cursor: default; 
} 

.hovereffect .img-checkbox{ 
    position: absolute; 
    width: 18px; 
    height: 18px; 
    top: 3px; 
    right: 5px; 
    cursor: pointer; 
} 

So gibt die Checkbox in der rechten oberen Ecke auf das Bild, und möchte die klickbare verlängern sind die ganzes Bild für eine bessere Benutzererfahrung.

Wie Sie sehen können, hat das Kontrollkästchen kein Label und ich möchte das Ziel ohne ein Label erreichen.

Ich versuchte Tricks mit dem :: After-Element, das irgendwie mit Chrom arbeitete, aber nicht wirklich mit Firefox und ich konnte den anklickbaren Bereich nicht reaktionsfähig machen, das heißt, auf den gesamten Bereich des Bildes erweitern.

Answer 1

Können Sie Javascript/jQuery verwenden?

Sie durch die Zuordnung einzigartige id zu jedem Bild beginnen Sie haben (Bsp: img1, img2, img3) und jedes Kontrollkästchen, um das Bild verknüpft (Ex: img1-Checkbox) .Dann Sie den Code verwenden können, unten:

$('#img1').click( $('#img1-checkbox').attr('checked', true); );

Oder so ähnlich.

Answer 2

Dies war ein problem seit einer sehr langen Zeit und Sie einfach können nicht erreichen Sie Ihr Ziel mit reinem CSS. Die einzigen verfügbaren Möglichkeiten, um es zu erledigen, sind label oder jquery/javascript oder :after Pseudoklasse.

Wenn Sie das Kontrollkästchen Größe erweitern möchten, dann versuchen Sie dies:

.hovereffect input[type=checkbox] 
{ 
    width:100px !important; //adjust as per need 
    height:100px !important; //adjust as per need 
} 

Dies wird den klickbaren Bereich der Checkbox Feld zu erhöhen. Working Link

Aber, wenn Sie die checkbox wollen transparent und zeigen das Bild hinter sein, dann werden Sie Etikett verwenden und setzen Sie es Hintergrundfarbe transparent.

Ich warte, jemanden zu sehen, der mich mit Arbeitscode falsch beweist.