如何選擇複選框時更改img樣式？

這裏是我的代碼如何選擇複選框時更改img樣式？

<div class="itemTaskUser"> 
    <input type="checkbox" name="users" id="user0" style="display: none"> 
    <label for="user0" class="checkbox-inline"> 
    <div>Rodolphe</div> 
    <img src="rodo.jpg" class="avatar32" > 
    </label> 
</div>

我嘗試acheive是建立一個CSS當複選框被選中

我試過，將放在一個綠色的邊框上IMG：

input:checked + label { 
    color:green; 
    font-weight: bold; 
} 
input:checked + img { 
    border:2px solid green; 
    width: 64px; 
}

選中複選框時，標籤爲綠色：GOOD

但是沒有圖像！

任何線索？

來源

2017-01-28 yarek

我希望答案幫你的解決這個問題。如果是，請考慮將其標記爲「已接受」。 – Harry

有問題的代碼是label是input的相鄰兄弟，而不是img，所以第二個選擇器不選擇任何元素。

+是adjacent sibling combinator它用於選擇DOM中引用元素旁邊的元素。在這裏，label是input（在參考元素）的直接兄弟和img是的label一個孩子，所以使用input:checked + label img將選擇img這是一個後代的label這又是檢查輸入的相鄰兄弟。

input:checked + label { 
 
    color: green; 
 
    font-weight: bold; 
 
} 
 
input:checked + label img { 
 
    border: 2px solid green; 
 
    width: 64px; 
 
}

<div class="itemTaskUser"> 
 
    <input type="checkbox" name="users" id="user0" style="display: none"> 
 
    <label for="user0" class="checkbox-inline"> 
 
    <div>Rodolphe</div> 
 
    <img src="rodo.jpg" class="avatar32"> 
 
    </label> 
 
</div>

我們還可以使用input:checked + label > img作爲選擇。這將縮小它更進一步，因爲> combinator將選擇img只有當它是一個孩子的label，而不是一個大孩子或一個偉大的盛大孩子等

來源

2017-01-28 15:36:50 Harry

如何選擇複選框時更改img樣式？

回答

相關問題