I have this HTML and I'm trying to add a border 1px solid red to the IMG when the checkbox is clicked. I already add the Hover event but i don't know ho to set the border red when the checkbox is selected.

```
<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>

```

this is the 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;}

```