Невозможно центрировать большую точку внутри переключателя - PullRequest
Новая
       12

Невозможно центрировать большую точку внутри переключателя

1 голос
/ 11 ноября 2019

Я пытаюсь центрировать точку внутри радиокнопки, и это отчасти утомительная работа, потому что я не могу понять, что именно делать.

Моя последняя работа должна выглядеть примерно так:

enter image description here

И вот что у меня есть что-то вроде:

enter image description here

Мой код: 

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
}

input[type='radio']:before {
  content: '';
  display: block;
  height: 95%;
  border-radius: 50%;
  line-height: 14px;
}

input[type="radio"]:checked:before {
  background: #00AEEF;
}

input[type="radio"]:checked {
  border-color: #00AEEF;
}
<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>

Что мне здесь не хватает? Я знаю, что я почти там

1 Ответ

1 голос
/ 11 ноября 2019

Вот более простая идея с меньшим количеством кода и только фоновой окраской: 

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
  padding:2px; /* Control the space between border and background */
}

input[type="radio"]:checked {
  border-color: #00AEEF;
  background: #00AEEF content-box; /* Don't color the padding area */
}
<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>
...