/ Дизайн / Необычное оформление элементов форм

Необычное оформление элементов форм

HIT

12.11.2021

1298

В данной статье будут собираться различные интересные решения по оформлению элементов форм.

Radio в виде переключателей

Верстка:


<div class="radios">
	<div class="label"><label for="volume_1" class="switch"><input id="volume_1" type="radio" name="volume" value="4.2 м³"><span class="slider"></span></label>4.2 м³</div>
	<div class="label"><label for="volume_2" class="switch"><input id="volume_2" type="radio" name="volume" value="10 м³"><span class="slider"></span></label>10 м³</div>
	<div class="label"><label for="volume_3" class="switch"><input id="volume_3" type="radio" name="volume" value="12 м³"><span class="slider"></span></label>12 м³</div>
	<div class="label"><label for="volume_4" class="switch"><input id="volume_4" type="radio" name="volume" value="15 м³"><span class="slider"></span></label>15 м³</div>
</div>

Стили:

.switch {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: .5em;
	width: 46px;
	height: 24px;
	border: none !important;
}

/* Hide the browser's default radio */
.switch input[type=radio] { 
	position: absolute;
	opacity: 0;
}

/* Create a custom switch */
.switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 34px;
	border: 1px solid #ccc;
	transition: .2s;
	background: #eee;
	background: linear-gradient(45deg, #ddd, #eee);
}

/* Create the indicator/dot */
.switch .slider::before {
	position: absolute;
	top: 2px;
	left: 4px;
	content: "";
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background-color: #fff;
	transition: .2s;
}

/* When the switch is checked, add a blue background */
.switch input[type=radio]:checked + .slider {
	background: #aaed00;
    background: linear-gradient(45deg, #6fdd00, #aaed00);
	border: 1px solid #3dc62d;
}

/* When the switch is checked, change position of the indicator/dot */
.switch input[type=radio]:checked + .slider::before {
	background-color: #fff;
	-webkit-transform: translateX(18px);
	-ms-transform: translateX(18px);
	transform: translateX(18px);
}

/* When the switch gets focus, add a shadow */
.switch input[type=radio]:focus + .slider {
	box-shadow: 0 0 0 0.2rem rgb(134 227 0 / 20%);
	background: linear-gradient(45deg, #6fdd00, #aaed00);
}

div с классом radios и обертка каждого пункта в div с классом label нужны для построения порядка пунктов radio. Непосредственно к решению они отношения не имеют.

Кастомная стрелка для select

Чистым CSS невозможно настроить вид стрелки у select. Точнее можно но только стилем background-image, что не очень удобно. Альтернативным способом является объединение изображения и select под общим div.

<div class="select-arrow">
	<select name="doc_type">
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>
	</select>
	<svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="#chevron_up"></use></svg>
</div>

Стили:

.select-arrow {
    position: relative;
}

.select-arrow select {
    background: #ff7300;
    border-radius: 50px;
    border: none;
    color: #fff;
    padding-right: 50px;
    cursor: pointer;

    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

.select-arrow select option {
    background: #fff;
    color: #523e7a;
}

.select-arrow svg {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    right: 20px;
    transform: rotate(180deg);
    fill: #fff;
    pointer-events: none;
}
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Необычное оформление элементов форм Необычное оформление элементов форм Необычное оформление элементов форм
Создание карусели Owl параметрами из HTML
Рекомендации для васСоздание карусели Owl параметрами из HTMLOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.