CSS: Oblikovanje dropdown okna

Pri izdelavi različnih spletnih obrazcev se velikokrat srečamo z izbirnimi meniji (select menu). Zanje je še posebej značilno, da jih je izredno težko oblikovati. Vendar lahko z določenimi CSS značkami in hitremu napredku v razvoju brskalnikov dosežemo dobre rezultate.

Oblikovanje izbirnih menijev (select menu) v HTMl formah je bilo včasih izredno težko. Namreč del, ki dejansko vsebuje seznam je generiran s strani operacijskega sistema, kar pomeni, da CSS zanj ne velja. Običajno smo ob potrebi bo boljšem oblikovanju zatekli k drugačnim rešitvam, ki pa jih je na dolgi rok težko vzdrževati. Zato je vedno bolje uporabljati enostavnejše rešitve oz. možnosti.

Pri Filament group so pripravili odlično CSS rešitev, ki nam omogoča oblikovanje dropdown okna – “Styling a Select Like It’s 2019“. Primer rešitve je prikazan spodaj:

Primer kode za oblikovanje dropdown menija

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

Vir in dodatne informacije: www.filamentgroup.com/lab/select-css.html