+7(982) 597-7179

Стилизация Select, как будто это 2019

2 мин. на прочтение

Select – Этот элемент трудно стилизовать для всех браузеров. Чтобы избегать его недостатки в прошлом, мы использовали обходные пути, такие как стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного элемента управления из различных элементов, которые легче стилизовать. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.

Как выясняется, разумный набор стилей для select можно создать согласованно и привлекательно для новых браузеров, не меняясь при этом и в старых.

Быстрый Пример 

Вот элемент без стиля select. Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.

Стилизация Select, как будто это 2019

Ниже представлен тот же select элемент, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):

Стилизация Select, как будто это 2019

Код 

HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

<select class="select-css">
	<option>This is a native select element</option>
	<option>Apples</option>
	<option>Bananas</option>
	<option>Grapes</option>
	<option>Oranges</option>
</select>

А вот CSS, управляющий select:

.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%; /* useful when width is set to anything other than 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;
		/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
			for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
			
		*/
		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;
		/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
		background-position: right .7em top 50%, 0 0;
		/* icon size, then gradient */
		background-size: .65em auto, 100%;
	}
	/* Hide arrow icon in IE browsers */
	.select-css::-ms-expand {
		display: none;
	}
	/* Hover style */
	.select-css:hover {
		border-color: #888;
	}
	/* Focus style */
	.select-css:focus {
		border-color: #aaa;
		/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
		box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
		box-shadow: 0 0 0 3px -moz-mac-focusring;
		color: #222; 
		outline: none;
	}
	

	/* Set options to normal weight */
	.select-css option {
		font-weight:normal;
	}
	

	/* Support for rtl text, explicit support for Arabic and Hebrew */
	*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
		background-position: left .7em top 50%, 0 0;
		padding: .6em .8em .5em 1.4em;
	}

Примечания по CSS

CSS для этого прекрасно использовать как есть, но если вы хотите его редактировать, вам может понадобиться знать о нескольких числах и значениях, которые помогают ему выглядеть правильно.

  • Select Устанавливается на display: block; по умолчанию , но вы можете поменять его , display: inline-block; width: auto; если хотите , чтобы он сидел рядом с label.
  • Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена ​​очень далеко.
  • Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
  • Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
  • font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select   текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
  • .select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдо элемент меню значка, поэтому может появиться пользовательский значок позади него.

Как это выглядит в разных браузерах

Вот несколько скриншотов select в различных браузерах. В некоторых браузерах, таких как IE9 и старше, дизайн иконок не полностью поддерживается, но элемент управления можно использовать и выглядит достаточно хорошо для наших обычных целей.

  • Firefox

Стилизация Select, как будто это 2019

  • Chrome

Стилизация Select, как будто это 2019

  • Safari

Стилизация Select, как будто это 2019

  • Edge

Стилизация Select, как будто это 2019

  • Internet Explorer 11

Стилизация Select, как будто это 2019

  • Internet Explorer 10

Стилизация Select, как будто это 2019

  • Internet Explorer 9

Стилизация Select, как будто это 2019

  • Internet Explorer 8

Стилизация Select, как будто это 2019

  • iOS Safari

Стилизация Select, как будто это 2019

  • Android Chrome

Стилизация Select, как будто это 2019

Наслаждайтесь! 

И это все. Спасибо за прочтение.


Читайте также:

Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0