Tell me how you can stylize input[type="radio"] and input[type="checkbox"] (no difference) so that the active item is framed in the frame, i.e. like this

 .primer { display: inline-block; border: 1px solid black; } 
 <div class="primer"> <label class="product--items"><input type="radio" class="radio" name="" value="1" checked="checked">Пример</label> </div>

The markup is this, and should not change:

 <label class="product--items"><input type="radio" class="radio" name="" value="1" checked="checked">Один</label> <label class="product--items"><input type="radio" class="radio" name="" value="1">Два</label> <label class="product--items"><input type="radio" class="radio" name="" value="1">Три</label>

those. input wrapped in a label .

    2 answers 2

    For this markup, it's easier to use js or jquery:

     $('input[type="radio"]').click(function() { if ($(this).prop("checked") === true) { $(this).closest('label').addClass('check').siblings().removeClass('check'); } else if ($(this).prop("checked") === false) { $(this).closest('label').removeClass('check'); } }); 
     label { display: block; } label.check { border: 1px solid; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <label class="product--items"><input type="radio" class="radio" name="val" value="1" checked="checked">Один</label> <label class="product--items"><input type="radio" class="radio" name="val" value="1">Два</label> <label class="product--items"><input type="radio" class="radio" name="val" value="1">Три</label>

    If it is still possible to insert a tag inside the label , for example, span , then:

     label { display: block; position: relative; } label>input:checked~span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #000; } 
     <label class="product--items"><input type="radio" class="radio" name="val" value="1" checked="checked">Один <span></span></label> <label class="product--items"><input type="radio" class="radio" name="val" value="1">Два <span></span></label> <label class="product--items"><input type="radio" class="radio" name="val" value="1">Три <span></span></label>

    • one
      Thank. Good luck to you! - LADYX
    • one
      @LADYX, 😉 Thank you! 🎄❄❄❄❄❄❄❄❄❄ - HamSter

    Use the focus pseudo- focus :

     .primer:focus { display: inline-block; border: 1px solid black; }