Как сверстать такой input radio?

144

12 октября 2019, 15:30

Как получить такой input radio на css ?

Буду благодарен за полезную информацию.

Answer 1

Как вариант, можно использовать radial-gradient:

input { display: none; } 
 
label { 
  margin: 12px 7px 12px 13px; 
  display: inline-block; 
  width: 117px; 
  height: 45px; 
  border-radius: 4px; 
  border: 2px solid #ADB4BB; 
  font: 18px/45px 'Arial'; 
  text-align: center; 
  color: #8D9399; 
  background-image: radial-gradient(circle at 22px 50%, transparent 11px, #ADB4BB 12px, #ADB4BB 13px, transparent 14px); 
} 
 
input:checked+label { 
  background-image: radial-gradient(circle at 22px 50%, #ADB4BB 13px, transparent 14px); 
}

<input type="radio" name="radio" id="yes"><label for="yes">ДА</label> 
<input type="radio" name="radio" id="no"><label for="no">НЕТ</label>

Или так:

input { display: none; } 
 
label { 
  margin: 12px 7px 12px 13px; 
  display: inline-block; 
  width: 117px; 
  height: 45px; 
  border-radius: 4px; 
  border: 2px solid #ADB4BB; 
  font: 18px/45px 'Arial'; 
  text-align: center; 
  color: #8D9399; 
  background-image: radial-gradient(circle at 22px 50%, transparent 11px, #ADB4BB 12px, #ADB4BB 13px, transparent 14px); 
} 
 
input:checked+label { 
  background-image: radial-gradient(circle at 22px 50%, #4B91C8 9px, transparent 11px, #ADB4BB 12px, #ADB4BB 13px, transparent 14px); 
}

<input type="radio" name="radio" id="yes" checked><label for="yes">ДА</label> 
<input type="radio" name="radio" id="no"><label for="no">НЕТ</label>

Answer 2

Вот так можно:

input { 
  display: none; 
} 
 
label { 
  display: inline-block; 
  width: 20px; 
  height: 20px; 
  margin: 20px 60px; 
  border-radius: 50%; 
  border: 2px solid gray; 
  position: relative; 
} 
 
#yes:checked ~ [for="yes"], 
#no:checked ~ [for="no"] { 
  background-color: gray; 
} 
 
[for="yes"]::after { 
  content: 'ДА'; 
  color: gray; 
  position: absolute; 
  right: -30px; 
} 
 
[for="no"]::after { 
  content: 'НЕТ'; 
  color: gray; 
  position: absolute; 
  right: -38px; 
} 
 
[for="yes"]::before, 
[for="no"]::before { 
  content: ''; 
  display: block; 
  border: 2px solid gray; 
  border-radius: 5px; 
  position: absolute; 
  top: -15px; 
  right: -90px; 
  bottom: -15px; 
  left: -20px; 
}

<input type="radio" name="radio" id="yes" /> 
<label for="yes"></label> 
 
<input type="radio" name="radio" id="no" /> 
<label for="no"></label>

Answer 3

Такой input type="radio" можно создать если обернуть input в тег label и написать несколько строк css. Кастомизировать именно кружок у radio button нельзя, для этого надо его сделать невидимым, и стилизировать span находящийся внутри тега label

label { 
  cursor: pointer; 
  border: 1px solid #000; 
  margin: 5px; 
  padding: 5px; 
  border-radius: 5px; 
  position: relative; 
} 
 
input[type=radio] { 
  visibility: hidden; 
} 
 
input:checked ~ .custom-radio { 
  background-color: #999; 
} 
 
.custom-radio { 
  position: absolute; 
  top: 3px; 
  left: 5px; 
  height: 20px; 
  width: 20px; 
  background-color: #eee; 
  border-radius: 50%; 
}

<label> 
  <input type="radio" name="yes-no"/> 
  ДА 
  <span class="custom-radio"></span> 
</label> 
<label> 
  <input type="radio" name="yes-no"/> 
  НЕТ 
  <span class="custom-radio"></span> 
</label>