ラベルなしchechboxクリック可能な領域を拡張

Question

私のコードは次のようになります。

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

がそうそこに画像の上に右上隅にあるチェックボックスで、クリッカブルを拡張することにしていることを伝えたいですより良いユーザーエクスペリエンスのために全体像。

チェックボックスにはラベルが表示されていないので、ラベルなしの目標を達成したいと思います。

私は、ちょっとしたことでクロムを使っていましたが、実際にはFirefoxでは使用できなかったトリックを試してみました。クリック可能な領域を反応させてイメージの全領域に広げることはできませんでした。

Answer 1

Javascript/jQueryを使用できますか？

あなたが持っているすべての画像にユニークなidを割り当てることによって開始することができますが、コードを使用することができます.Then（例：IMG1、IMG2、IMG3）と画像に関連するすべてのチェックボックス（IMG1-チェックボックス例）以下：そのような

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

か何か。

Answer 2

これは非常に長い時間とできないproblemされている純粋なCSSであなたの目標を達成する。それを得るために利用できる唯一の方法は、labelまたはjquery/javascriptまたは:after疑似クラスを使用しています。チェックボックスのサイズを拡張したい場合

、これを試してみてください。これは、チェックボックスフィールドのクリック可能な面積を増加させる

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

。 Working Link

しかし、あなたはcheckboxが透明なると後ろの画像を表示したい場合は、ラベルを使用し、それが透明に背景色です設定する必要があります。

私は、誰かが私の作業コードに間違っていることを証明するのを待っています。