Оформление и стилизация option select, radio buttons, input checkbox CSS3
Стилизация option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery.
3 года назад
Оформление и стилизация option select, radio buttons, input checkbox CSS3
При разработке и создании сайта, многие веб-разработчики при верстке HTML используют чекбоксы, выпадающие списки и радио кнопки. Однако все указанные элементы по умолчанию оформлены в серых тонах, имеют большие заступы, и ненужные отступы. Иными словами стили, используемые по умолчанию, не соответствуют современным веб-стандартам. А также нужно отметить, что в разных браузерах, стили выпадающих списков, радио кнопок и чекбокосов по умолчанию отображаются по разному. Профессиональный дизайн страницы сайта не должен отличать отображение, не на мобильных и портативных компьютерах, планшетах, не на стационарных ПК.
Ниже приведен код оформления и стилизации option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery. Важно отметить работоспособность кода и мощную кроссбраузерную поддержку.
Ниже приведен код оформления и стилизации option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery. Важно отметить работоспособность кода и мощную кроссбраузерную поддержку.
content.htm
<ul class="item">
<li>
<h1>checkbox</h1>
<label class="control checkbox_st">Первый чекбокс
<input type="checkbox" checked="checked">
<div class="gird_input"></div>
</label>
<label class="control checkbox_st">Второй чекбокс
<input type="checkbox">
<div class="gird_input"></div>
</label>
<label class="control checkbox_st">Пассивный
<input type="checkbox" disabled="disabled">
<div class="gird_input"></div>
</label>
<label class="control checkbox_st">Selected
<input type="checkbox" disabled="disabled" checked="checked">
<div class="gird_input"></div>
</label>
</li>
<li>
<h1>Radio buttons</h1>
<label class="control radio_st">Радио кнопка
<input type="radio" name="radio" checked="checked">
<div class="gird_input"></div>
</label>
<label class="control radio_st">Радио кнопка
<input type="radio" name="radio">
<div class="gird_input"></div>
</label>
<label class="control radio_st">Disabled
<input type="radio" name="radio2" disabled="disabled">
<div class="gird_input"></div>
</label>
<label class="control radio_st">Selected
<input type="radio" name="radio2" disabled="disabled" checked="checked">
<div class="gird_input"></div>
</label>
</li>
<li>
<h1>Select</h1>
<div class="select">
<select>
<option>Option</option>
<option>Option</option>
<option>Option</option>
</select>
<div class="select__arrow"></div>
</div>
<div class="select">
<select>
<option>Second select</option>
<option>Option</option>
<option>Option</option>
</select>
<div class="select__arrow"></div>
</div>
<div class="select">
<select disabled="disabled">
<option>Disabled</option>
<option>Option</option>
<option>Option</option>
</select>
<div class="select__arrow"></div>
</div>
</li>
</ul>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
html, body {
margin: 20px 0;
}
body {
background : #eee;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #4f4f5a;
padding: 0;
}
.item {
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
display: table;
}
.item li {
width: 220px;
height: 270px;
padding: 20px;
margin: 10px;
display: inline-block;
vertical-align: top;
background: #fff;
text-align: left;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
@media (max-width:468px) {
.item li {
width: calc(100% - 60px);
}
}
.item li .control {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 15px;
cursor: pointer;
}
.item li .control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.item li .gird_input {
position: absolute;
top: 0px;
left: 0;
height: 16px;
width: 16px;
background: #fff;
border: 1px solid #eee;
}
.item li .checkbox_st .gird_input {
border-radius: 3px;
}
.item li .checkbox_st .gird_input:after {
left: 5px;
top: 0px;
width: 5px;
height: 12px;
border: solid #34bb92;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.item li .checkbox_st input:disabled ~ .gird_input:after {
border-color: #7b7b7b;
}
.item li .radio_st .gird_input {
border-radius: 50%;
}
.item li .control:hover input:not([disabled]) ~ .gird_input,
.item li .control input:focus ~ .gird_input {
border-color: #34bb92;
}
.item li .control input:checked ~ .gird_input {
background: #fff;
}
.item li .control input:disabled ~ .gird_input {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
.gird_input:after {
content: '';
position: absolute;
display: none;
}
.control input:checked ~ .gird_input:after {
display: block;
}
.item li .radio_st .gird_input:after {
left: 5px;
top: 5px;
height: 6px;
width: 6px;
border-radius: 50%;
background: #34bb92;
}
.item li .radio_st input:disabled ~ .gird_input:after {
background: #7b7b7b;
}
.item li .select {
position: relative;
width: 100%;
display: inline-block;
margin-bottom: 15px;
}
.item li .select select {
width: 100%;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
border-radius: 0;
background: #e6e6e6;
color: #7b7b7b;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.item li .select select::-ms-expand {
display: none;
}
.item li .select select:hover,
.item li .select select:focus {
color: #000;
background: #ccc;
}
.item li .select select:disabled {
opacity: 0.5;
pointer-events: none;
}
.item li .select__arrow {
position: absolute;
top: 16px;
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.item li .select select:hover ~ .select__arrow,
.item li .select select:focus ~ .select__arrow {
border-top-color: #000;
}
.item li .select select:disabled ~ .select__arrow {
border-top-color: #ccc;
}
3,8K
Комментарии