Оформление и стилизация option select, radio buttons, input checkbox CSS3
12.04.2018 13:25

Оформление и стилизация option select, radio buttons, input checkbox CSS3

При разработке и создании сайта, многие веб-разработчики при верстке HTML используют чекбоксы, выпадающие списки и радио кнопки. Однако все указанные элементы по умолчанию оформлены в серых тонах, имеют большие заступы, и ненужные отступы. Иными словами стили, используемые по умолчанию, не соответствуют современным веб-стандартам. А также нужно отметить, что в разных браузерах, стили выпадающих списков, радио кнопок и чекбокосов по умолчанию отображаются по разному. Профессиональный дизайн страницы сайта не должен отличать отображение, не на мобильных и портативных компьютерах, планшетах, не на стационарных ПК.

Ниже приведен код оформления и стилизации option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery. Важно отметить работоспособность кода и мощную кроссбраузерную поддержку. index.html 
<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 
.item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.item li {
	max-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);
}

.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;
}
115
Меню
Теги
Реклама