Html & Css

Курс молодого бойца: испытание на прочность
  • 12.10.2019
  • Html & Css
  • Просмотров:74
  • Комментариев:0

Простая стилизация Checkbox & Radio кнопок

Уровень сложности:

Стандартные элементы Checkbox и Radio button не всегда отвечают требованиям дизайна сайта и корпоративным цветам. На данном примере мы рассмотрим как заменить стандартные переключатели на свои, используя только шрифтовые иконки и CSS. Легкая смена цвета и размера checkbox & radio кнопок.

Стилизация Checkbox и Radio кнопок
Рисунок 1.Стилизация Checkbox и Radio кнопок

Подключение шрифтов

/* IconsFont */
@font-face {
    font-family: 'Switch';
    src: url('../fonts/Switch.eot?saan96');
    src: url('../fonts/Switch.eot?saan96#iefix') format('embedded-opentype'), url('../fonts/Switch.ttf?saan96') format('truetype'), url('../fonts/Switch.woff?saan96') format('woff'), url('../fonts/Switch.svg?saan96#Switch') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'Switch' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.stack {
    position: relative;
    display: inline-block;
    height: 1.2em;
    line-height: 1em;
    vertical-align: middle;
}
i {
    padding-right: 8px;
}
.icon-radio-color:before {
    content: "\e906";
}
.icon-radio-color-select:before {
    content: "\e907";
}
.icon-radio:before {
    content: "\e900";
}
.icon-radio-select:before {
    content: "\e904";
}
.icon-radio-select-circle:before {
    content: "\e901";
}
.icon-check-a:before {
    content: "\e902";
}
.icon-select:before {
    content: "\e905";
}
.icon-check-square:before {
    content: "\e903";
}
.icon-check-b:before {
    content: "\e908";
}
.icon-check-out:before {
    content: "\e909";
}
.icon-check:before {
    content: "\e90a";
}

Прописываем стили для Checkbox & Radio кнопок

/* Radio-toolbar-one */
.radio-toolbar-one input[type="radio"] {
    display: none;
}
.radio-toolbar-one label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
    font-size: 16px;
}
.radio-toolbar-one label:hover {
    cursor: pointer;
    background: none;
}
.radio-toolbar-one input[type="radio"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.radio-toolbar-one label:before {
    content: '\e900';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.radio-toolbar-one input[type="radio"]:checked + label:before {
    content: '\e901';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Radio-toolbar-two */
.radio-toolbar-two input[type="radio"] {
    display: none;
}
.radio-toolbar-two label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
    font-size: 16px;
}
.radio-toolbar-two label:hover {
    cursor: pointer;
    background: none;
}
.radio-toolbar-two input[type="radio"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.radio-toolbar-two label:before {
    content: '\e900';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.radio-toolbar-two input[type="radio"]:checked + label:before {
    content: '\e904';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Radio-toolbar-three */
.radio-toolbar-three input[type="radio"] {
    display: none;
}
.radio-toolbar-three label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
    font-size: 16px;
}
.radio-toolbar-three label:hover {
    cursor: pointer;
    background: none;
}
.radio-toolbar-three input[type="radio"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.radio-toolbar-three label:before {
    content: '\e902';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.radio-toolbar-three input[type="radio"]:checked + label:before {
    content: '\e903';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Radio-toolbar-four */
.radio-toolbar-four input[type="radio"] {
    display: none;
}
.radio-toolbar-four label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
    font-size: 16px;
}
.radio-toolbar-four label:hover {
    cursor: pointer;
    background: none;
}
.radio-toolbar-four input[type="radio"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.radio-toolbar-four label:before {
    content: '\e902';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.radio-toolbar-four input[type="radio"]:checked + label:before {
    content: '\e908';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Checkbox-toolbar-one */
.checkbox-toolbar-one input[type="checkbox"] {
    display: none;
}
.checkbox-toolbar-one label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
}
.checkbox-toolbar-one label:hover {
    cursor: pointer;
    background: none;
}
.checkbox-toolbar-one input[type="checkbox"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.checkbox-toolbar-one label:before {
    content: '\e902';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.checkbox-toolbar-one input[type="checkbox"]:checked + label:before {
    content: '\e907';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Checkbox-toolbar-two */
.checkbox-toolbar-two input[type="checkbox"] {
    display: none;
}
.checkbox-toolbar-two label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
}
.checkbox-toolbar-two label:hover {
    cursor: pointer;
    background: none;
}
.checkbox-toolbar-two input[type="checkbox"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.checkbox-toolbar-two label:before {
    content: '\e902';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.checkbox-toolbar-two input[type="checkbox"]:checked + label:before {
    content: '\e908';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Checkbox-toolbar-three */
.checkbox-toolbar-three input[type="checkbox"] {
    display: none;
}
.checkbox-toolbar-three label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
}
.checkbox-toolbar-three label:hover {
    cursor: pointer;
    background: none;
}
.checkbox-toolbar-three input[type="checkbox"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.checkbox-toolbar-three label:before {
    content: '\e906';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.checkbox-toolbar-three input[type="checkbox"]:checked + label:before {
    content: '\e907';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

/* Checkbox-toolbar-four */
.checkbox-toolbar-four input[type="checkbox"] {
    display: none;
}
.checkbox-toolbar-four label {
    display: inline-block;
    background: none;
    padding: 7px 12px 5px 0;
}
.checkbox-toolbar-four label:hover {
    cursor: pointer;
    background: none;
}
.checkbox-toolbar-four input[type="checkbox"]:checked + label {
    background: none;
    padding: 7px 12px 5px 0;
    color: #DB2723;
}
.checkbox-toolbar-four label:before {
    content: '\e902';
    font-family: 'Switch';
    color: #333;
    margin-right: 7px;
}
.checkbox-toolbar-four input[type="checkbox"]:checked + label:before {
    content: '\e903';
    font-family: 'Switch';
    color: #DB2723;
    margin-right: 7px;
}

Вставляем код на страницу HTML

<!-- radio-toolbar-one -->
<div class="radio-toolbar-one">
    <div><input type="radio" id="radio1" name="bs" checked="checked"><label for="radio1">Radio-1</label></div>
    <div><input type="radio" id="radio2" name="bs"><label for="radio2">Radio-2</label></div>
    <div><input type="radio" id="radio3" name="bs"><label for="radio3">Radio-3</label></div>
</div>

<!-- radio-toolbar-two -->
<div class="radio-toolbar-two">
    <div><input type="radio" id="radio1a" name="bs_a" checked="checked"><label for="radio1a">Radio-1</label></div>
    <div><input type="radio" id="radio2a" name="bs_a"><label for="radio2a">Radio-2</label></div>
    <div><input type="radio" id="radio3a" name="bs_a"><label for="radio3a">Radio-3</label></div>
</div>

<!-- radio-toolbar-three -->
<div class="radio-toolbar-three">
    <div><input type="radio" id="radio1b" name="bs_b" checked="checked"><label for="radio1b">Radio-1</label></div>
    <div><input type="radio" id="radio2b" name="bs_b"><label for="radio2b">Radio-2</label></div>
    <div><input type="radio" id="radio3b" name="bs_b"><label for="radio3b">Radio-3</label></div>
</div>

<!-- radio-toolbar-four -->
<div class="radio-toolbar-four">
    <div><input type="radio" id="radio1c" name="bs_c" checked="checked"><label for="radio1c">Radio-1</label></div>
    <div><input type="radio" id="radio2c" name="bs_c"><label for="radio2c">Radio-2</label></div>
    <div><input type="radio" id="radio3c" name="bs_c"><label for="radio3c">Radio-3</label></div>
</div>

<!-- checkbox-toolbar-one -->
<div class="checkbox-toolbar-one">
    <div><input type="checkbox" id="checkbox1d" name="bs_d" checked="checked"><label for="checkbox1d">Checkbox-1</label></div>
    <div><input type="checkbox" id="checkbox2d" name="bs_d"><label for="checkbox2d">Checkbox-2</label></div>
    <div><input type="checkbox" id="checkbox3d" name="bs_d"><label for="checkbox3d">Checkbox-3</label></div>
</div>

<!-- checkbox-toolbar-two -->
<div class="checkbox-toolbar-two">
    <div><input type="checkbox" id="checkbox1e" name="bs_f" checked="checked"><label for="checkbox1e">Checkbox-1</label></div>
    <div><input type="checkbox" id="checkbox2e" name="bs_f"><label for="checkbox2e">Checkbox-2</label></div>
    <div><input type="checkbox" id="checkbox3e" name="bs_f"><label for="checkbox3e">Checkbox-3</label></div>
</div>

<!-- checkbox-toolbar-three -->
<div class="checkbox-toolbar-three">
    <div><input type="checkbox" id="checkbox1f" name="bs_f" checked="checked"><label for="checkbox1f">Checkbox-1</label></div>
    <div><input type="checkbox" id="checkbox2f" name="bs_f"><label for="checkbox2f">Checkbox-2</label></div>
    <div><input type="checkbox" id="checkbox3f" name="bs_f"><label for="checkbox3f">Checkbox-3</label></div>
</div>

<!-- checkbox-toolbar-four -->
<div class="checkbox-toolbar-four">
    <div><input type="checkbox" id="checkbox1j" name="bs_j" checked="checked"><label for="checkbox1j">Checkbox-1</label></div>
    <div><input type="checkbox" id="checkbox2j" name="bs_j"><label for="checkbox2j">Checkbox-2</label></div>
    <div><input type="checkbox" id="checkbox3j" name="bs_j"><label for="checkbox3j">Checkbox-3</label></div>
</div>

Комментарии

Написать комментарий

Оставить комментарий

*Поля обязательны для заполнения

Поиск по сайту