Изменение радио кнопок с помощью CSS

В этой статье, по сути будут то же самое. но для радио кнопок. В итоге, после того как вы воспользуетесь материалом из этой статьи, то вы получите результат схожий с примером ниже.

Как и в случаи с чекбоксами, весь фокус делается с помощью тех же псевдоселекторов :checked и :not. Аналогично обычная радио кнопка скрывается, а новая на ее месте отображается, которая и имеет более презентабельный вид.

Обычно, radio кнопки идут по несколько штук сразу. С помощью них вы делаете выбор внутри формы перед отправкой. В примерах я тоже буду размещать по две кнопки. Если вам нужно больше или меньше, то без проблем добавляйте или удаляйте соблюдая некоторые правила о которых я напишу ниже.

К примеру, у нас будет две обычные кнопки, которые будут иметь вот такой код.

<input type="radio" name="radio_old" id="radio_old" />
<label for="radio_old">Первая кнопка</label><br><br>
<input type="radio" name="radio_old" id="radio_oldtw" />
<label for="radio_oldtw">Вторая кнопка</label>

К каждой кнопке мы с вами добавили метку с помощью label. Если в старых можно обойтись без них, то в новых они понадобятся в любом случаи. Без них нельзя. В отличии от обычных radio кнопок, у новых так же должен быть указан класс. В итоге получится так:

<input type="radio" name="radio" class="myradio" id="radio" />
<label for="radio">Первая кнопка</label><br><br>
<input type="radio" name="radio" class="myradio" id="radiotw" />
<label for="radiotw">Вторая кнопка</label>

Как видите, добавлен класс myradio. Именно этому классу и будут присвоены новые стили CSS. Так же не забудьте про другие стандартные параметры радиокнопок, которые нужно добавлять всем кнопкам.

• id - кнопкам добавляются айди, для того, чтобы было можно подвязать к ним метки label.
• name - имя кнопки. Его можно указывать одинаковым для нескольких радио кнопок, тогда будет возможность переключения между кнопками в форме. Если имена будут разными, то после активации такой кнопки, снять выделение с нее не получится.
• for у метки label - должен соответствовать id нужной кнопки. Важным является момент, что label должен располагаться сразу после радио кнопки.

Закончив с HTML разметкой кнопок, вы можете приступить к их внешним изменениям. Как и писал ранее, все стили мы добавим нашему классу - myradio. Для этого в свой файл стилей, вы должны добавить вот такой кусок кода.

.myradio {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
.myradio + label {
  cursor: pointer;
}
.myradio:not(checked) {
  position: absolute;
  opacity: 0;
}
.myradio:not(checked) + label {
  position: relative;
  padding: 0 0 0 35px;
}
.myradio:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #FFF;
}
.myradio:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2ebbde;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  opacity: 0;
  transition: all .2s;
}
.myradio:checked + label:after {
  opacity: 1;
}
.myradio:focus + label:before {
  box-shadow: 0 0 3px 3px rgba(45,182,216,.3);
}

Если вы давно работаете с CSS, то на этом все и больше никаких шагов не будет. Можете смотреть результат и править стили под себя. Если же вам код не понятен, но вы хотите как то его разобрать, то попробую объяснить, что за что отвечает. Каждый параметр не буду расписывать, для этого существуют учебники по CSS, лишь объясню основы.

• Немного ровняем кнопку для старых версий Internet Explorer.

  .myradio {
    vertical-align: top;
    width: 17px;
    height: 17px;
    margin: 0 3px 0 0;
  }
  

• Делаем наш label кликабельным. При наведении на него будет появляться рука вместо стрелки.

  .myradio + label {
    cursor: pointer;
  }
  

• С этого места начинается модернизация кнопок. Первым делом, делаем нашу стандартную кнопку невидимой.

  .myradio:not(checked) {
    position: absolute;
    opacity: 0;
  }
  

• Задаем позиционирование новой кнопке относительно нашего label

  .myradio:not(checked) + label {
    position: relative;
    padding: 0 0 0 35px;
  }
  

• Настройка вида для неактивной кнопки, когда в центре нет точки.

  .myradio:not(checked) + label:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #FFF;
  }
  

• Это внешний вид той точки/кружка, что появляется в центре при нажатии на кнопку.

  .myradio:not(checked) + label:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2ebbde;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
    opacity: 0;
    transition: all .2s;
  }
  

• Прозрачность кружка/точки при активации. Как видно в предыдущем пункте был параметр - opacity: 0;

  .myradio:checked + label:after {
    opacity: 1;
  }
  

• Этот параметр я выделил как опциональный. Его эффект - тень вокруг кнопки при фокусировке во время нажатия на нее. В примере это самые нижние кнопки. Если вам не нравится, можете его не добавлять.

  .myradio:focus + label:before {
    box-shadow: 0 0 3px 3px rgba(45,182,216,.3);
  }
  

Как и в прошлой статье, думаю, вы поняли смысл и заметили, что особо сложного, здесь ничего нет. Весь код можно менять в соответствии со своими идеями, но не допуская ошибок и придерживаясь советов.

На этом все, спасибо за внимание. 🙂