Question

我有这个HTML，并且我在单击复选框时尝试向IMG添加边框1px纯红色。我已经添加了悬停事件但是我不知道在选中复选框时将边框设置为红色。

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

Answer 1

您可以通过合并:checked和+选择器

来实现

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

DEMO

Answer 2

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

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

选中CSS时，将边框红色添加到复选框

2 个答案:

DEMO