擴展chechbox可點擊區域無標籤

我的代碼如下所示：擴展chechbox可點擊區域無標籤

<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，我不能讓可點擊區域響應，也就是說，延伸到圖像的整個區域。

來源

2016-07-27 Adnan Mujkanovic

你能使用Javascript/jQuery嗎？

您可以通過給你（例如：IMG1，IMG2，IMG3）每幅圖像分配唯一id開始，每一個複選框，相關的圖像（例如：IMG1-複選框）。然後，你可以使用代碼如下：

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

或類似的東西。

來源

2016-07-27 12:24:20 davidgagnedesign

事情是它的一個媒體庫im建設，有很多圖像，所以我需要添加獨特的類名到所有圖像。你的建議很好。我可以用jquery/js來完成，但是可能用css解決了太多不必要的js代碼。對？ –

'class'對於一組元素是共同提及的，'id'是針對單個元素（唯一的）。所以，你可以給你的圖像分配'id'，然後在你的jQuery代碼中使用** id **。 –

這已經是一個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是透明並顯示後面的圖像，那麼你將不得不使用標籤，並設置它的背景顏色爲透明。

我在等着看別人用工作代碼證明我錯了。

來源

2016-07-27 13:26:24

擴展chechbox可點擊區域無標籤

回答

相關問題