In the form you need to make a similar checkbox enter image description here How to better implement this is an idea like this:

input[type="checkbox"] { display:none; } input[type="checkbox"] + label{ cursor: pointer; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 41px; } label{ margin: 0; color: @gray4; font-size: 15px; font-weight: 400; } input[type="checkbox"] + label::before{ content: ""; display: inline-block; height: 28px; width: 28px; border-radius: 4px; background: @blue1 no-repeat center center; margin-right: 12px; } input[type="checkbox"]:checked + label::before { background-image: url('../img/checked.png'); }

That is the basic idea on the pseudo-class before , but I want to know how best?

  • With input and pseudo-element norms. - Sasha Omelchenko

1 answer 1

Can be done with pseudo-elements. JavaScript is not needed, it will be redundant here. And for such a checkbox not necessary to load an image, you can fully do it in styles:

 .wrapper{ text-align:center; vertical-align:top; } .checkbox{ position:relative; height:auto; width:200px; display:inline-block; } .checkbox img{ height:200px; width:200px; display:block; } .checkbox span{ margin:5px; display:block; } .checkbox label{ display:block; cursor:pointer; position:relative; } .checkbox label:before{ content:""; display:block; width:50px; height:50px; margin:auto; position:absolute; left:0; right:0; top:75px; background-color:transparent; border-radius:50px; } .checkbox label:after{ content:""; display:block; width:26px; height:12px; margin:auto; position:absolute; left:0; right:0; top:88px; border-left:5px solid transparent; border-bottom:5px solid transparent; transform:rotate(-45deg); } .checkbox input[type=checkbox]{ display:none; } .checkbox input[type=checkbox]:checked + label:before{ background-color:#8dc3ff; } .checkbox input[type=checkbox]:checked + label:after{ border-color:#fff; } 
 <div class="wrapper"> <div class="checkbox"> <input id="checkbox" type="checkbox" name="checkbox" value="checkbox"> <label for="checkbox"> <img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/> <span>Текст текст</span> </label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" name="checkbox" value="checkbox2"> <label for="checkbox2"> <img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/> <span>Текст текст</span> </label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" name="checkbox" value="checkbox3"> <label for="checkbox3"> <img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/> <span>Текст текст</span> </label> </div> </div><!--.wrapper-->