<div class="checkboxes-container">
  

<label>
  <input type="radio" name="radio" class="visually-hidden">
  <span class="check-area">Телефон</span>

</label>

<label>
  <input type="radio" name="radio" class="visually-hidden">
  <span class="check-area">Телевизор</span>

</label>
  
  </div>
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

.checkboxes-container {
  padding: 10px;
}

.checkboxes-container:focus-within {
  outline: 3px solid red;
}

.check-area {
  border: 2px solid var(--border-color, #80808047);
  padding: 5px;
  cursor: pointer;
}

.check-area:hover {
  --border-color: grey;
}

input:checked + .check-area {
  --border-color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.