Стилизация input type radio на чистом css3

Сегодня создадим стилизацию для поля формы input type radio. Наверное многие знают, что создать стили для радио кнопок не так просто. Так вот сегодня мы с вами создадим красивые радио кнопки при помощи css3 и никаких скриптов и тому подобных громоздких примудростей. В интернете конечно можно найти много интересных методов стилизации радио-кнопок, но они очень громоздкие и не всем понятные. Но я вам помогу решить - эту задачу быстро и без никаких javascript и jquery

Даже в самом CSS3 нет возможности на прямую редактировать стили для поля формы input type radio.

Но для создания стиля для поля radio можно обойти все возможные простые подходы.

Для примера давайте рассмотрим простой тип поля переключателя

Код HTML

<form action="" method="get">
<input name="Кнопка 1" type="radio" value="" checked>
Кнопка 1
 
<input name="Кнопка 2" type="radio" value="">
Кнопка 2
 
<input name="Кнопка 3" type="radio" value="">
Кнопка 3
 
<input name="Кнопка 4" type="radio" value="">
Кнопка 4
 
</form>

Здесь мы можем просмотреть простую реализацию формы. А сейчас приступим к реализации вот такой вот стильной радио кнопки.

Пример как это работает

А сейчас просмотри как же стилизовать радио кнопки, input type radio?

HTML код

<ul class="radio-group">
    <li>
            <input id="choice-a" type="radio" name="g">
            <label for="choice-a">
                <span><span></span></span>
                Choice A
            </label>
    </li>
    <li>
            <input id="choice-b" type="radio" name="g">
            <label for="choice-b">
                <span><span></span></span>
                Choice B
            </label>
    </li>
    <li>
            <input id="choice-c" type="radio" name="g">
            <label for="choice-c">
                <span><span></span></span>
                Choice C
            </label>
    </li>
    <li>
            <input id="choice-d" type="radio" name="g">
            <label for="choice-d">
                <span><span></span></span>
                Choice D
            </label>
    </li>
</ul>

И вот собственно сам css для стилизации

CSS код

ul.radio-group li {
    position: relative;
    list-style: none;
    padding: 10px;
}
 
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
 
/* Соответствует прямому потомку лейбла, которому предшествует a
   радио-кнопка */
input[type="radio"] + label > span {
  position: relative;
  border-radius: 12px;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #bcbcbc;
  margin: 0 1em 0 0;
  display: inline-block;
  vertical-align: middle;
}
 
 
 
/* Соответствует промежутку, содержавшему прямым потомком
   из лейбла, которому предшествует проверенная радио-кнопка */
input[type="radio"]:checked + label > span span {
   display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 4px;
    border: none;
    background: #e00e17;
}

Еще один пример

Очень красивые получились радио-кнопки и просто не привычные конечно. Но надеюсь вам понравилось. Чтож пример надеюсь вам понравился приступаем к просмотру кода который необходимо вставить на страницы сайта.

Код HTML

<div>
<form>
<input type="radio" name="radio" id="radio1" class="radio" checked="">
<label for="radio1">Кнопка 1</label>
</form>
</div>
 
<div>
<form>
<input type="radio" name="radio" id="radio2" class="radio">
<label for="radio2">Кнопка 2</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio" id="radio3" class="radio">
<label for="radio3">Кнопка 3</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio" id="radio4" class="radio">
<label for="radio4">Кнопка 4</label>
</form>
</div>

Как вы уже поняли из исходного кода, что здесь мы помещаем нашу форму в блок, и придаем для нее css3 стили вот таким образом. Смотрим код ниже

Код CSS

form {
    margin: 40px 0;
}
 
div {
    clear: both;
    margin: 0 50px;
}
 
label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}
 
/* hide input */
input.radio:empty {
    margin-left: -999px;
}
 
/* style label */
input.radio:empty ~ label {
    position: relative;
    float: left;
    line-height: 2.5em;
    text-indent: 3.25em;
    margin-top: 2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
input.radio:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '';
    width: 2.5em;
    background: #D1D3D4;
    border-radius: 3px 0 0 3px;
}
 
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #C2C2C2;
}
 
input.radio:hover:not(:checked) ~ label {
    color: #888;
}
 
/* toggle on */
input.radio:checked ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #9CE2AE;
    background-color: #4DCB6D;
}
 
input.radio:checked ~ label {
    color: #777;
}
 
/* radio focus */
input.radio:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

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

Вот в таком не большом посте, я вам объяснил принцып реализации стилей для радио-кнопок самим чистым методом css3 стилей.
Теги:
input, radio, css3
Добавлено: 21 Апреля 2018 07:03:07 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...