选择 CSS 时为复选框添加边框红色答案

【问题标题】：add border red to checkbox when selected CSS选择 CSS 时为复选框添加边框红色
【发布时间】：2016-07-23 04:19:08
【问题描述】：

我有这个 HTML，我正在尝试在单击复选框时向 IMG 添加一个 1px 纯红色边框。我已经添加了 Hover 事件，但我不知道选择复选框时如何将边框设置为红色。

<div class="row ">
    <div class="col-md-5 col-md-offset-1 col-centered ">
        <input type="checkbox" id="piega1" class=" servizioSection2 " name="imgSection2" value="PiegaByWellaProfessionals">
        <label class="piega" for="piega1">
            <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
    </div>
    <div class="col-md-5  col-centered piege">
        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="Piega By System Professionals">
        <label for="piega2" class="piega ">
            <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
    </div>
</div>

这是CSS

.immaginePiega {-webkit-filter: grayscale(100%);filter: grayscale(100%); border-radius: 45px 0 45px 0; border: 1px solid #cccccc}
.immaginePiega:hover{-webkit-filter: grayscale(0%);filter: grayscale(0%); border-radius: 45px 0 45px 0; border: 3px solid red}
.immaginePiega:active{border:10px solid red;}

【问题讨论】：

你需要jquery事件处理程序吗？

标签： jquery html css checkbox

【解决方案1】：

您可以通过组合 :checked 和 + 选择器来做到这一点，

input.servizioSection2:checked + label img {
  border:1px solid red;
}

DEMO

【讨论】：

@DanieleMartini 很高兴为您提供帮助！ :)

【解决方案2】：

input[type="checkbox"]:checked + label img {
    border: 1px solid red;
}

这适用于所有具有包含图像的标签的复选框类型输入。您正在寻找选中的复选框及其随附的标签。

【讨论】：