css - 选中复选框上的CSS

我的网站上至少有4个复选框

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        Chain 1 (+₱10.00)
      </label>
   </div>
</div>

我如何添加CSS,当我选中复选框时,图像将添加一些边框并且文本将更大

我有此代码,但不起作用

 #product :checked + label {
  font-weight: bold;
} 
 #product :checked + img{
  border:1px solid red
} 

最佳答案

CSS规则:

#product :checked + label {
  font-weight: bold;
}

将与 <label>项的直接 同级:checked相匹配。在您的情况下,标签是复选框的 。要使文本变为粗体,可以将其包装在 <span>中,然后使用 ~组合器选择任何匹配的同级:

的HTML
<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        <span>Chain 1 (+₱10.00)</span>
      </label>
   </div>
</div>

的CSS

#product :checked ~ span {
  font-weight: bold;
}

如果HTML与问题中的内容相同,那么以下内容应该可以工作:

 #product :checked + img{
    border:1px solid red
 } 

如果没有,您可能在复选框和图像之间还有另一个元素。在这种情况下,您可以如上所述使用 #product :checked ~ img