How do I style input[type=""]?

Tell me how you can style input[type="radio"] and input[type="checkbox"] (no difference) in such a way that the active item is completely framed when it is selected, 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 like 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>

I.e. input is wrapped in label.

2 answers

For this markup, it is 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 another tag inside 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>
 4
Author: HamSter, 2018-12-13 16:06:44

Use the pseudo-class focus :

.primer:focus { 
      display: inline-block; 
      border: 1px solid black;
 }
 1
Author: Анатолий Шевелев, 2018-08-04 17:51:06