- 12.10.2019
- Html & Css
Простая стилизация Checkbox & Radio кнопок
Уровень сложности:
Стандартные элементы Checkbox и Radio button не всегда отвечают требованиям дизайна сайта и корпоративным цветам. На данном примере мы рассмотрим как заменить стандартные переключатели на свои, используя только шрифтовые иконки и CSS. Легкая смена цвета и размера 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>
Комментарии
Написать комментарий