Содержание

— HTML | MDN

HTML тэг <select> представляет собой элемент управления который содержит меню опций:

Элемент включает глобальные атрибуты.

autofocus HTML5
Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут autofocus, элемент является логическим (булевым).
disabled
Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру fieldset; если у родительского элемента не указан атрибут disabled, то элемент управления доступен для взаимодействия.
form HTML5
Этот атрибут указывает к какой конкретно форме относится элемент <select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы <select> где угодно в документе, а не только как потомки форм.
multiple
Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.
name
Этот атрибут используется для указания имени элемента управления.
required HTML5
Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.
size
Если элемент управления представлен как прокручиваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в  виде прокручиваемого списка. Значение по умолчанию 0.

Примечания Firefox: Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.


<select name="select"> 
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>

Результат

Примечания

BCD tables only load in the browser

  • Другие элементы форм: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea> (en-US), <keygen> (en-US), <input>, <output>, <progress> and <meter>.
  • События запускаемые <select>: change.

Как стилизовать только с CSS?



Примечание: этот вопрос не касается создания пользовательского выпадающего списка. Речь идет только о возможностях укладки

<option> элементов внутри выбранного элемента в CSS

Как я могу стилизовать <option> s элемента <select> с кроссбраузерной совместимостью? Я знаю много способов JavaScript , которые настраивают выпадающий список для преобразования в <li>, о чем я не спрашиваю.

<select>
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Я спрашиваю, Что может быть возможно только с CSS, с совместимостью для IE9+, Firefox и Chrome.

Я хочу, чтобы стиль был таким же или как можно ближе.

Я попробовал здесь http://jsfiddle.net/jitendravyas/juwz3/3/ , но Chrome не показывает никакого стиля, кроме цвета шрифта, в то время как Firefox показывает еще немного. Как заставить границы и отступы работать и в Chrome?

css html-select
Поделиться Источник Jitendra Vyas     08 декабря 2011 в 11:27

3 ответа

  • Можно ли еще стилизовать выпадающий список select <option> ? (с 2017 года )

    Простой вопрос, казалось бы, не имеющий реального решения ни для одного браузера, кроме Mozilla Firefox. Можем ли мы, начиная с 2017 года, стилизовать выпадающее меню и <option> элементов поля <select> ? Предпочтительно только CSS, но и JavaScript решения подойдут. select { outline: 0;…

  • Почему мы не можем стилизовать опцию выпадающего списка с помощью CSS?

    В Css мы можем обобщенно стилизовать все элементы, но я заметил, что мы не можем стилизовать option элемент select с помощью CSS. Насколько я знаю, Option является дочерним элементом select , тогда каковы возможные причины того, что он не позволяет вам стилизовать этот элемент? Я неоднократно…


70

EDIT 2015 Май

Отказ от ответственности: я взял фрагмент из ответа, приведенного ниже:

Важное обновление!

В дополнение к WebKit, начиная с Firefox 35 мы сможем использовать свойство appearance :

Используя -moz-appearance со значением none на combobox, теперь удалите раскрывающуюся кнопку

Итак, теперь, чтобы скрыть стиль по умолчанию, это так же просто, как добавить следующие правила в наш элемент select:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Для поддержки IE 11 вы можете использовать [ ::-ms-expand ][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Старый ответ

К сожалению, то, что вы просите, невозможно с помощью pure CSS. Однако вот что-то похожее, что вы можете выбрать в качестве обходного пути. Проверьте текущий код ниже.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
 
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

Вот вопрос, который вы задали некоторое время назад. Как оформить выпадающий список <select> с CSS только без JavaScript? Как там говорится, только в Chrome и в некоторой степени в Firefox вы можете достичь того, чего хотите. В противном случае, к сожалению, нет кроссбраузерного решения pure CSS для стилизации select.

Поделиться Savas Vedova     08 декабря 2011 в 12:36


4

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

Поделиться danwellman     08 декабря 2011 в 12:19


2

Я уже играл с выбранными элементами раньше, и, не переопределяя функциональность с помощью JavaScript, я не думаю, что это возможно в Chrome. Независимо от того, используете ли вы плагин или пишете свой собственный код, CSS только не подходит для Chrome/Safari, и, как вы сказали, Firefox лучше справляется с этим.

Поделиться cchana     08 декабря 2011 в 12:17

  • Как стилизовать поле подтверждения по умолчанию только с css?

    Я хотел бы стилизовать стандартный window.confirm без использования какого-либо дополнительного кода JavaScript, только с CSS. Возможно ли это вообще? И если это так, то как я могу это сделать?

  • Стиль <select> элемент на основе выбранного <option>

    Можно ли стилизовать элемент select на основе того, что option выбрано только с помощью CSS? Я знаю о существующих решениях JavaScript . Я попытался стилизовать сам элемент option, но это придаст стиль только элементу option в списке опций, а не выбранному элементу. select[name=qa_contact]…

Похожие вопросы:


Как стилизовать опцию select с помощью css

Мне нужно стилизовать мой select с css, так что это выглядит как изображение ниже, есть 2 вещи, которые я не могу понять, когда выбрана опция удалить классический синий фон, как сделать отступ…


Есть ли какой-нибудь способ стилизовать optgroup с помощью CSS на iPad?

Есть ли какой-нибудь способ стилизовать элемент HTML ‘optgroup’ с помощью CSS? Особенно важно, чтобы стиль появился в мобильном браузере iOS для iPad. HTML-это: <optgroup label=Great Britain>…


Как мне стилизовать выпадающий список <select> только с CSS?

Существует ли CSS-единственный способ стилизовать выпадающий список <select> ? Мне нужно стилизовать форму <select> как можно больше по-человечески, без каких-либо JavaScript. Какие…


Можно ли еще стилизовать выпадающий список select <option> ? (с 2017 года )

Простой вопрос, казалось бы, не имеющий реального решения ни для одного браузера, кроме Mozilla Firefox. Можем ли мы, начиная с 2017 года, стилизовать выпадающее меню и <option> элементов поля…


Почему мы не можем стилизовать опцию выпадающего списка с помощью CSS?

В Css мы можем обобщенно стилизовать все элементы, но я заметил, что мы не можем стилизовать option элемент select с помощью CSS. Насколько я знаю, Option является дочерним элементом select , тогда…


Как стилизовать поле подтверждения по умолчанию только с css?

Я хотел бы стилизовать стандартный window.confirm без использования какого-либо дополнительного кода JavaScript, только с CSS. Возможно ли это вообще? И если это так, то как я могу это сделать?


Стиль <select> элемент на основе выбранного <option>

Можно ли стилизовать элемент select на основе того, что option выбрано только с помощью CSS? Я знаю о существующих решениях JavaScript . Я попытался стилизовать сам элемент option, но это придаст…


Стиль <select> меню с использованием только CSS/CSS3

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


Как стилизовать значение «option» в раскрывающемся списке select?

Я пытаюсь стилизовать теги option в этом поле select , но когда я нажимаю на него, теги опций шире, чем поле выбора, но они должны быть равны. Можно ли сделать это через css? Вот текущий прогресс:…


Как стилизовать поле OPTION с помощью текста INLINE

Я пытаюсь стилизовать коробки SELECT / OPTION с помощью встроенного CSS. background-color , похоже, не работает: <option>text</option> В принципе, я хочу 3-4…

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <option> определяет отдельные пункты списка, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION</title>
 </head>
 <body> 

  <form action="option1.php">
   <p><select size="3" name="hero">
    <option disabled>Выберите героя</option>
    <option value="t1" selected>Чебурашка</option>
    <option value="t2">Крокодил Гена</option>
    <option value="t3">Шапокляк</option>
    <option value="t4">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

HTML и CSS с примерами кода

Тег <option> (от англ. option — пункт, параметр, опция) определяет отдельные пункты списка, создаваемого с помощью контейнера <select>.

Ширина списка определяется самым широким текстом, указанным в <option>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

Формы

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Закрывающий тег не обязателен.

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определённый пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого элемента доступны универсальные атрибуты.

disabled

Блокирует элемент списка для его выбора.

Синтаксис

<option disabled>...</option>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

label

Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри <option> игнорируется и в списке выводится значение label.

Синтаксис

<option label="<текст>">...</option>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

selected

Делает текущий пункт списка выделенным. Если к элементу <select> добавлен атрибут multiple, то можно выделять более одного пункта списка.

Синтаксис

<option selected>...</option>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="<текст>">...</option>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OPTION</title>
  </head>
  <body>
    <form action="option2.php">
      <p>
        <select size="3" name="hero">
          <option disabled>Выберите рыцаря</option>
          <option value="t1" selected>Гавейн</option>
          <option value="t2">Ланселот</option>
          <option value="t3">Галахэд</option>
          <option value="t4">Персиваль</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

Оформляем Select CSS! Пользовательские стили для Select на CSS

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД

1
2

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

.dropdownvisible {
    height: auto;
}

На это:

CSS КОД

1
2
3
4

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

  • ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
  • ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
  • ✓ Opera 12.14, Opera 12.15, Opera 12.16
  • ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
  • ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
  • ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
  • ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

  1. 1 шаг. Подключаем необходимые файлы
  2. 2 шаг. HTML структура элемент Select
  3. 3 шаг. Добавляем стили для Select CSS
  4. В каких браузерах этот Select CSS
  5. Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Стилизация select на CSS

Вы здесь: Главная — CSS — CSS3 — Стилизация select на CSS

Для верстальщика обязательным порядком необходимо уметь стилизовать разные элементы формы. Согласитесь, что вряд ли дизайнер оставит форму, как в браузере, никак не приукрасив.

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

<div>
    <select>
        <option value="Лимон">Лимон</option>
        <option value="Банан">Банан</option>
        <option value="Яблоко">Яблоко</option>
    </select>
</div>

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.


CSS для select

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

.select {
    position: relative;
}

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select {
    display: block;
    width: 100%; /* от ширины блока div */
    padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
    background: none; /* убираем фон */
    border: 1px solid #ccc; /* рамка */
    border-radius: 3px;/* скругление полей формы */
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем дефолнтные стрелочки */
    font-family: inherit;/* наследует от родителя */
    font-size: 1rem;
    color: #444;
}

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after {
    content: "";
    display: block;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 1;
    margin-top: -3px;
}

Как вставить дизайнерскую стрелочку?

Ниже, я приведу два варианта, как вставить уникальную стрелочку, при верстке макета, если её нарисовал дизайнер. Вместо стрелочки на CSS, можно добавить стрелочку в виде картинки в пустые кавычки content.

.select:after {
    content: " url(...) ";
}

или вставить картинку в виде фона без повтора.


.select select {
    background: url(...) no-repeat;
}

Демонстрация примера

Стилизация select option

Как вы уже заметили, что тег option, остался не стилизованным. Почему его не нужно стилизовать? Дело в том, что браузеры мобильных устройств, по разному отображают опции выбора и совсем не так, как на десктопных. Поэтому пользователи мобильных телефонов, так и так увидели бы выпадающий список без стилизации.

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

  • Создано 22.05.2019 10:15:50
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

пользовательских стилей выбора с чистым CSS

Это выпуск №20 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 14 с лишним лет работы фронтенд-разработчиком .

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

Несколько свойств и методов, которые будет использовать наше решение:

  • clip-path для создания настраиваемой стрелки раскрывающегося списка
    • Макет сетки
  • CSS для выравнивания собственного выделения и стрелки
  • пользовательских переменных CSS для гибкого моделирования
  • em единиц для относительного размера

Теперь доступно : мой яйцеголовый видеокурс Accessible Cross-Browser CSS Form Styling.Вы научитесь использовать методы, описанные в этом руководстве, на следующем уровне, создав систему дизайна форм с возможностью создания тематических форм, которая будет распространяться на все ваши проекты.

Распространенные проблемы с Native Selects #

Как и все типы полей формы, в Firefox, Chrome и Safari:

Различия включают в себя размер поля, размер шрифта, высоту строки, и наиболее выдающимся является разница в том, как оформлен индикатор раскрывающегося списка.

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

Примечание: раскрывающийся список по-прежнему не стилизован, поэтому после открытия .

Метка не является частью нашего упражнения по стилизации, но она включена в качестве общего требования, особенно с атрибутом для , имеющим значение id на .

С clip-path мы получаем четкую, масштабируемую "графику" стрелки, которая ощущается как SVG, но с преимуществами возможности использовать нашу настраиваемую переменную и содержаться в стиле по сравнению с разметкой HTML.

Чтобы создать стрелку, мы определим ее как псевдоэлемент :: after .

  .select :: after {
 content: ""; 
 ширина: 0,8 мм; 
 высота: 0,5 мм; 
 background-color: var (- стрелка выбора); 
 clip-path: многоугольник (100% 0%, 0 0%, 50% 100%); 
}

Синтаксис clip-path немного странный, и, поскольку он не является предметом внимания данной статьи, я рекомендую следующие ресурсы:

  • Колби Фэйок объясняет синтаксис на примере в этом видео о яйцеголовых
  • Clippy - это онлайн-инструмент, который позволяет вам выбирать форму и настраивать точки, динамически генерируя clip-path CSS

Если вы следите по тексту, возможно, вы заметили, что стрелка не появляется, несмотря на определение ширины и высоты .При осмотре было обнаружено, что :: после фактически не допускается его ширина.

Мы решим эту проблему, обновив наш .select , чтобы использовать макет сетки CSS.

 . Выберите {
 display: grid; 
}

Это позволяет стрелке появляться, существенно расширяя ее отображаемое значение, подобное «блоку».

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

Чтобы исправить выравнивание, мы воспользуемся моим любимым приемом CSS-сетки (старая шляпа для вас, если вы читали здесь несколько статей!).

Старое решение CSS: позиция: абсолютная Новое решение CSS: одна областей шаблона сетки , чтобы содержать их все

Сначала мы определим нашу область, затем определим, что выбирает и :: after оба используют его. Имя привязано к элементу, для которого он создан, и мы упростим его, назвав его "select":

  .select {
 grid-template-sizes: "выбрать"; 
} 
 select, 
 .select: после {
 grid-area: select; 
}

Что дает нам перекрытие стрелки над собственным выбором из-за контекста стекирования через исходный порядок:

Теперь мы можем использовать свойства сетки, чтобы завершить выравнивание каждого элемента:

 .выберите {
 align-items: center; 
} 
 .select: после {
 justify-self: end; 
}

Та-да!

: фокус Состояние #

Ах да - помните, как мы удалили контур ? Нам нужно устранить пропущенное состояние : focus , чтобы его не отбросить.

В ближайшее время мы могли бы использовать свойство под названием : focus-within , но на данный момент все же лучше включить для него полифилл.

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

К сожалению, это означает, что нам нужно добавить еще один элемент в DOM.

После собственного элемента select, как последний дочерний элемент в пределах . Select , добавьте:

Почему после? Поскольку, поскольку это чистое решение CSS, размещение его после собственного выбора означает, что мы можем изменить его, когда select сфокусирован, используя соседний родственный селектор - + .

Это позволяет нам создать следующее правило:

  выберите: focus +.фокус {положение 
: абсолютное; 
 top: -1px; 
 слева: -1px; 
 справа: -1px; 
 bottom: -1px; 
 граница: сплошная 2px var (- select-focus); 
 border-radius: наследовать; 
}

Вам может быть интересно, почему мы вернулись к позиции : абсолютному после того, как вы просто изучили предыдущий взлом grid-area .

Причина в том, чтобы избежать пересчета корректировок на основе заполнения. Если вы попробуете это самостоятельно, вы увидите, что даже установка ширины и высоты на 100% по-прежнему заставляет его сидеть внутри отступа.

Задание position: absolute лучше всего соответствует размеру элемента. Мы растягиваем лишний пиксель в каждом направлении, чтобы убедиться, что он перекрывает свойство границы.

Но нам нужно сделать еще одно добавление к .select , чтобы убедиться, что он относительно нашего выбора по ... ну, position: relative .

 . Выбрать {
 позиция: относительная;

А вот и все вместе, как показано в Chrome:

Множественный выбор #

Selects имеет второй вариант, который позволяет пользователю выбрать более одного варианта.С точки зрения HTML это просто означает добавление атрибута multiple , но мы также добавим класс для помощи в создании настроек стиля под названием select - multiple :

.

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

Это быстрое исправление для настройки нашего селектора, определяющего стрелку. Мы используем : not () , чтобы исключить наш недавно определенный класс:

  .select: not (.select - multiple) :: после

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

  выберите [несколько] {
 отступ справа: 0; 
}

По умолчанию параметры с длинным значением будут выходить за пределы видимой области и будут обрезаны, но я обнаружил, что основные браузеры позволяют переопределить перенос, если вы хотите:

  выберите [несколько] вариант {
 пробел: нормальный; 
}

При желании мы можем установить высоту для выбора, чтобы обеспечить более надежное кроссбраузерное поведение.В ходе тестирования я узнал, что Chrome и Firefox будут отображать частичный вариант, но Safari полностью скроет параметр, который не может быть полностью отображен.

Высота должна быть установлена ​​непосредственно в собственном выборе. Учитывая наши другие стили, значение 6rem сможет показать 3 варианта:

  выберите [несколько] {
 высота: 6 бэр; 
}

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

Состояние : selected из опций довольно легко настраивается в Chrome, в некоторой степени в Firefox и совсем не в Safari. См. Демонстрацию CodePen для раздела, который можно раскомментировать для предварительного просмотра.

: отключено стилей #

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

Чтобы выделить отключенное состояние, мы хотим применить серый фон.Но поскольку мы установили стили фона на . Выберите и нет селектора : parent , нам нужно создать последний класс для обработки этого состояния:

  .select - отключено {
 курсор: запрещено; 
 цвет фона: #eee; 
 background-image: linear-gradient (вверх, #ddd, #eee 33%); 
}

Здесь мы обновили курсор как дополнительную подсказку о том, что с полем нельзя взаимодействовать, и обновили значения фона, которые мы ранее установили как белые, чтобы теперь они были более серыми для отключенного состояния.

Это приводит к следующим выступлениям:

Демо №

Вы можете протестировать это самостоятельно, но вот предварительный просмотр полного решения (слева) в Firefox, Chrome и Safari:

Стефани Эклс (@ 5t3ph)

Bulma: Бесплатная современная CSS-структура с открытым исходным кодом на основе Flexbox

Select | Bulma: бесплатная современная CSS-фреймворк с открытым исходным кодом на основе Flexbox.

Быстрый вопрос : какую версию Sass вы используете?

Ответьте здесь Показать меню Показать боковую панель

ж

Нет результатов.
Сбросить поиск esc

Выбрать

Встроенный браузер выберите раскрывающийся список , оформленный соответствующим образом

Класс select - это простая оболочка вокруг HTML-элемента

Поддерживаются несколько модификаторов , влияющих на:

Множественный выбор #

Вы можете стилизовать раскрывающийся список с множественным выбором , используя модификатор is-multiple и атрибут multiple HTML.

АргентинаБоливияБразилияЧилиКолумбияЭквадорГайанаПарагвайПеруСуринамУругвайВенесуэла

Цвета #

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Стили #

Вы можете создать выпадающий список с закругленными углами , добавив модификатор is-rounded :

Закругленный выпадающий список с опциями

  

  <выбор>

Размеры #

Элемент select доступен в 4 различных размерах:

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

Пример

Выберите раскрывающийся список с параметрами

HTML

  

  <выбор>

состояния #

Bulma стилизует различные состояния элемента select .Каждое состояние доступно как псевдокласс и класс CSS:

  • : зависает и зависает
  • : фокус и сфокусирован
  • : активный и активный

Это позволяет вам получить стиль определенного состояния, не вызывая его.

Нормальный

Выберите раскрывающийся список с параметрами

  

  <выбор>
Ховер

Выберите раскрывающийся список с параметрами

  

  <выбор>
Фокус

Выберите раскрывающийся список с параметрами

  

  <выбор>
Загрузка

Выберите раскрывающийся список с параметрами

  

  <выбор>

С иконами #

Вы можете добавить модификатор к элементу управления:

Также необходимо добавить модификатор на значок :

  • icon is-left , поскольку has-icons-left используется

Размер select будет определять размер контейнера значков.

Страна Выберите раскрывающийся список с параметрами

  

  

    <выбор>

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

Страна Выберите раскрывающийся список с параметрами

  

  

    <выбор>

Страна Выберите раскрывающийся список с параметрами

  

  

    <выбор>

Страна Выберите раскрывающийся список с параметрами

  

  

    <выбор>

Страна Выберите раскрывающийся список с параметрами

  

  

    <выбор>

Моя электронная книга CSS

Моя 44-страничная электронная книга, которая научит вас CSS за 44 минуты

Купить сейчас →

На этой странице

Информационный бюллетень Особенности, выпуски, демонстрация… оставайтесь в курсе!

Выберите · Bootstrap v5.0

По умолчанию

Custom и не могут изменять из-за ограничений браузера.

Откройте это меню выбораOneTwoThree

Калибр

Вы также можете выбрать из маленького или большого пользовательского выбора, чтобы соответствовать нашим текстовым полям аналогичного размера.

Открыть это меню выбораOneTwoThreeОткрыть это меню выбораOneTwoThree

Также поддерживается несколько атрибутов :

Откройте это меню выбораOneTwoThree

Как и размер , атрибут :

Откройте это меню выбораOneTwoThree

Отключено

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

Откройте это меню выбораOneTwoThree

Sass

Переменные 

  $ form-select-padding-y: $ input-padding-y;
$ form-select-padding-x: $ input-padding-x;
$ form-select-font-family: $ input-font-family;
$ form-select-font-size: $ input-font-size;
$ form-select-indicator-padding: $ form-select-padding-x * 3; // Дополнительный отступ для фонового изображения
$ form-select-font-weight: $ input-font-weight;
$ form-select-line-height: $ input-line-height;
$ form-select-color: $ input-color;
$ form-select-bg: $ input-bg;
$ form-select-disabled-color: null;
$ form-select-disabled-bg: $ серый-200;
$ form-select-disabled-border-color: $ input-disabled-border-color;
$ form-select-bg-position: справа $ form-select-padding-x center;
$ form-select-bg-size: 16 пикселей 12 пикселей; // В пикселях, потому что размеры изображения
$ form-select-indicator-color: $ серый-800;
$ form-select-indicator: url ("data: image / svg + xml,    ");

$ form-select-feedback-icon-padding-end: $ form-select-padding-x * 2,5 + $ form-select-indicator-padding;
$ form-select-feedback-icon-position: по центру справа $ form-select-indicator-padding;
$ form-select-feedback-icon-size: $ input-height-inner-half $ input-height-inner-half;

$ form-select-border-width: $ input-border-width;
$ form-select-border-color: $ input-border-цвет;
$ form-select-border-radius: $ border-radius;
$ form-select-box-shadow: $ box-shadow-inset;

$ form-select-focus-border-color: $ input-focus-border-color;
$ form-select-focus-width: $ input-focus-width;
$ form-select-focus-box-shadow: 0 0 0 $ form-select-focus-width $ input-btn-focus-color;

$ form-select-padding-y-sm: $ input-padding-y-sm;
$ form-select-padding-x-sm: $ input-padding-x-sm;
$ form-select-font-size-sm: $ input-font-size-sm;

$ form-select-padding-y-lg: $ input-padding-y-lg;
$ form-select-padding-x-lg: $ input-padding-x-lg;
$ form-select-font-size-lg: $ input-font-size-lg;

$ form-select-transition: $ input-transition;

CSS-only Custom Styled Select.Элемент HTMLselect, стилизованный напрямую… | by B. Chen

Элемент select уже давно трудно согласованно стилизовать во всех браузерах. Мы использовали JavaScript для создания элемента управления, подобного select, из различных элементов. Например, мы использовали неупорядоченные списки ul или div для создания настраиваемых компонентов выбора.

Оказывается, обходные пути JavaScript сложно поддерживать из-за следующих проблем:

  • 💣 Проблемы с доступностью
  • 💣 Плохо для программ чтения с экрана
  • 💣 Трудно использовать на мобильных устройствах, особенно когда список опций длинный
  • 💣 Не работает, когда JavaScript отключен
  • Может быть, не подходит для SEO
  • Намного больше кода для поддержки
  • Повышенный риск появления ошибки

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

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

Chrome default unstyled select

Ниже тот же select элемент, стилизованный непосредственно с использованием только CSS.

Чистый CSS-стиль select

Разметка HTML

Давайте просто воспользуемся HTML-выбором по умолчанию (без каких-либо дополнительных HTML-тегов):

CSS

Стрелка раскрывающегося списка и граница по умолчанию являются частью стандартного «внешнего вида» элемента формы.Итак, вам нужно убедиться, что appearance: none; устанавливается в CSS стиля во всех браузерах.

  внешний вид : нет; 
  -webkit-appearance : нет; 
  -moz-appearance : none; / * Для IE <= 11 * / 
 select :: - ms-expand {
  display : none; 
}

Обратите внимание, что существует специальный псевдокласс для IE ≤ 11.

А вот полный CSS, управляющий внешним видом элемента select

 select {
 width: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 border-bottom: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 внешний вид: нет; 
-внешний вид -webkit: нет; 
 -моз-внешний вид: нет; 
 отступ: 10 пикселей; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
}

К настоящему моменту вы должны увидеть:

Базовый вид CSS-стиля select

Селектор : hover используется для выбора элементов при наведении указателя мыши на элемент.Селектор : focus используется для выбора элемента, имеющего фокус. Давайте стилизуем эффект наведения и фокуса с эффектом перехода 0,3 с легкость на цвет , цвет фона и цвет границы снизу .

 выберите {
 ширина: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 border-bottom: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 padding-right: 38px; 
 внешний вид: нет; 
-внешний вид -webkit: нет; 
 -моз-внешний вид: нет; 
 / * Добавление эффекта перехода * / 
 transition: color 0.3 с легкостью, с легкостью для фонового цвета 0,3 с, с легкостью для окраски нижнего края - 0,3 с; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
} select: hover, 
 select: focus {
 color: # c0392b; 
 цвет фона: белый; 
 цвет нижней границы: #DCDCDC; 
}

Теперь вы должны увидеть такой эффект:

Добавление эффекта наведения и фокусировки

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

Разметка HTML

Давайте используем значок svg и поместим его рядом с , выберите . Вы можете легко найти любую бесплатную иконку svg из библиотеки с открытым исходным кодом, например font-awesome.

CSS

Вот стиль CSS для иконки.Обратите внимание, что мы используем переход background-color и border-color .

 .select-icon {положение 
: абсолютное; 
 верх: 4 ​​пикселя; 
 справа: 4 пикселя; 
 ширина: 30 пикселей; 
 высота: 36 пикселей; 
 событий-указателей: нет; 
 граница: сплошная 2px # 962d22; 
 padding-left: 5 пикселей; Переход 
: цвет фона - 0,3 с, граница - 0,3 с; 
} 
 .select-icon svg.icon {
 переход: заливка с легкостью 0,3 с; 
 заливка: белая; 
}

Вот CSS-эффект наведения и фокуса для значка.Обратите внимание, что селектор CSS ~ используется для выбора .select-icon , которому предшествует select 

 select: hover ~ .select-icon, 
 select: focus ~ .select-icon {
 background-color : белый; 
 цвет границы: #DCDCDC; 
} 
 select: hover ~ .select-icon svg.icon, 
 select: focus ~ .select-icon svg.icon {
 fill: # c0392b; 
}

Теперь вы должны увидеть завершенный пользовательский выбор, например

Завершенный пользовательский выбор

И все.Спасибо за чтение, вот полный код:

Стилизация параметров управления меню с одним выбором (элементы параметров) с помощью CSS

Эта демонстрационная страница относится к пересмотренной статье «Стилизация элементов управления формы с помощью CSS». Подробнее о назначении этой страницы читайте в статье.

Каждый элемент управления меню выбора состоит из этого HTML:

  1. <выбрать>
  2. <опция выбрана> Вариант 1

Следующие правила CSS используются для стилизации элемента option :

  1. # el01 option {width: 20em} / * Ширина * /
  2. # el02 option {/ * Цвет текста и фона, синий на светло-сером * /
  3. цвет: # 00f;
  4. цвет фона: #ddd;
  5. }
  6. # el03 option {background: url (/ i / icon-info.gif) no-repeat 100% 50%} / * Фоновое изображение * /
  7. # el04 option {border-width: 6px} / * Ширина границы * /
  8. # el05 option {border: 2px dotted # 00f} / * Ширина, стиль и цвет границы * /
  9. # el06 option {border: none} / * Без рамки * /
  10. # el07 option {font-family: "Courier New", Courier} / * Другой шрифт * /
  11. # el08 option {font-size: 2em} / * Текст большего размера * /
  12. # el09 option {font-size: 0.5em} / * Меньший текст * /
  13. # el10 option {font-weight: bold} / * Полужирный текст * /
  14. # el11 option {padding: 1em} / * Увеличить отступ * /
  15. # el12 option {text-align: right} / * Изменить выравнивание текста * /
  16. [selected] {/ * Цвет текста и толщина шрифта, красный и полужирный * /
  17. цвет: # f00;
  18. font-weight: жирный;
  19. }

В текущем браузере с вашими текущими настройками элементы меню option выглядят следующим образом (откройте каждое меню, чтобы увидеть стили его элементов option ):

# el01 Вариант 1 # el01 Вариант 2 # el01 Вариант 3

# el02 Вариант 1 # el02 Вариант 2 # el02 Вариант 3

# el03 Вариант 1 # el03 Вариант 2 # el03 Вариант 3

# el04 Вариант 1 # el04 Вариант 2 # el04 Вариант 3

# el05 Вариант 1 # el05 Вариант 2 # el05 Вариант 3

# el06 Вариант 1 # el06 Вариант 2 # el06 Вариант 3

# el07 Вариант 1 # el07 Вариант 2 # el07 Вариант 3

# el08 Вариант 1 # el08 Вариант 2 # el08 Вариант 3

# el09 Вариант 1 # el09 Вариант 2 # el09 Вариант 3

# el10 Вариант 1 # el10 Вариант 2 # el10 Вариант 3

# el11 Вариант 1 # el11 Вариант 2 # el11 Вариант 3

# el12 Вариант 1 # el12 Вариант 2 # el12 Вариант 3

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

Вот скриншоты из нескольких браузеров в разных операционных системах:

  1. Camino 1, Mac OS X 10.4.8
  2. Firefox 2.0.0.1, Mac OS X 10.4.8
  3. Firefox 2.0.0.1, Ubuntu 6.10
  4. Firefox 2.0.0.1, Windows XP
  5. iCab 3.0.3, Mac OS X 10.4.8
  6. Internet Explorer 6, Windows XP
  7. Internet Explorer 7, Windows XP
  8. Konqueror 3.5.5, Кубунту
  9. OmniWeb 5.5.1, Mac OS X 10.4.8
  10. Opera 9.10, Mac OS X 10.4.8
  11. Opera 9.10, Ubuntu 6.10
  12. Opera 9.10, Windows XP
  13. Safari 2.0.4, Mac OS X 10.4.8
  14. WebKit 420+, Mac OS X 10.4.8

20 бесплатных фрагментов полей выбора CSS и JavaScript - csshint

Коллекция бесплатных HTML и CSS настраиваемых элементов выбора. Элементы дизайна с использованием Bootstrap, javascript, css и htm примеров: раскрывающийся список, несколько, настраиваемая стрелка и т. Д.Лучшие бесплатные коробки выбора.

1. Выпадающее меню
Автор
  • Мостафа

демо и код

2. выберите вариант взаимодействия

Автор
  • Бхакти Аль Акбар

демо и код

3. Пользовательский раскрывающийся список
Автор
  • Серебряная капля

демо и код

4.Пользовательское меню выбора
Автор
  • Уоллес Эрик

демо и код

5. Пользовательский Выберите вариант
Автор
  • Дэни Сантос

демо и код

6. простой пользовательский выбор
Автор
  • Алессандро Фальчи

демо и код

7.Поле выбора с заполнителем [только CSS]

демо и код

8. Пользовательский плагин Jquery окна выбора от VJ

демо и код

9. Выберите Меню

демо и код

10.Плоское поле выбора

демо и код

11.Индивидуальный выбор

демо и код

12.Пользовательский выбор

демо и код

13. Селектор

демо и код

14. стилизованный раскрывающийся список с поддержкой nojs

демо и код

15.Доступные флажки и переключатели

демо и код

16. Выпадающая колода карт CSS3

демо и код

17. Пользовательский выбор

демо и код

18. Меню значков SVG

демо и код

19. Выпадающие списки темного и светлого цветов

демо и код

20. Выпадающий список «Довольно выберите»

демо и код

примеров | bootstrap-select · Разработчик SnapAppointments

Стандартные поля выбора

Сделайте это:

ГорчичныйКетчупРелиш

Стань этим:

ГорчицаКетчупРелиш
  <выбрать>

Выберите боксы с оптгруппами

ГорчичныйКетчупРелишПалаткаФонарикТуалетная бумага

  <выбрать>

Множественные поля выбора

ГорчичныйКетчупРелиш

  <выбрать несколько>

Живой поиск

Вы можете добавить поисковый запрос, передав data-live-search = "true" attribute:

Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

Ключевые слова

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

Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

Ограничьте количество опций, которые можно выбрать с помощью атрибута data-max-options .Это также работает для групп опций. Настройте сообщение, отображаемое при достижении лимита, с помощью maxOptionsText .

ГорчицаКетчупРелишГорчинаКетчупРелишРавнинаТушеный

  

<выбрать несколько>

Заполнитель

Использование атрибута title установит текст заполнителя по умолчанию, если ничего не выбрано.Это работает как для множественных, так и для стандартных полей выбора:

Несколько ГорчичныйКетчупРелиш

Стандарт ГорчичныйКетчупРелиш

Выделенный текст

Установить атрибут заголовка для отдельных параметров для отображения альтернативного текста при выборе параметра:

Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

  <выбрать>

Формат выбранного текста

Укажите способ отображения выбора с помощью атрибута data-selected-text-format при множественном выборе.

Поддерживаемые значения:

  • значений : разделенный запятыми список выбранных значений (по умолчанию)
  • счетчик : Если выбран один элемент, отображается значение параметра. Если выбрано более одного, отображается количество выбранных элементов, например Выбрано 2 из 6
  • count> x : где x - количество элементов, выбранных при изменении формата отображения с значений на count
  • статический : Всегда показывать выбранный заголовок (заполнитель), независимо от выбора

ГорчичныйКетчупРелиш

ГорчицаКетчупРелишЛук

Классы пуговиц

Вы можете установить классы кнопок с помощью атрибута стиля данных :

ГорчичныйКетчупРелиш

ГорчичныйКетчупРелиш

ГорчичныйКетчупРелиш

ГорчичныйКетчупРелиш

ГорчичныйКетчупРелиш

Отметить выбранную опцию

Вы также можете отображать значок галочки в стандартных полях выбора с помощью show-tick class:

ГорчичныйКетчупРелиш

  <выбрать>

Стрелку меню начальной загрузки можно добавить с помощью show-menu-arrow class:

Примечание. Эта функция устарела и будет удалена в v2.0,0.

  <выбрать>

Стиль индивидуальные опции

Классы и стили, добавленные к параметрам, переносятся в поле выбора:

ГорчичныйКетчупРелиш

  <выбрать>
  
  
  

  
 .особый {
  шрифт: жирный! важно;
  цвет: #fff! important;
  фон: # bc0000! important;
  преобразование текста: прописные буквы;
}

Ширина

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

  

  

    

      <выбор>

В качестве альтернативы используйте атрибут data-width , чтобы установить ширину выделения.Установите data-width на 'auto' , чтобы автоматически настроить ширину выбора до самого широкого варианта. 'fit' автоматически регулирует ширину выделенной области до ширины текущей выбранной опции. Также можно указать точное значение, например, 300px или 50% .

ширина: 'авто' ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

ширина: «подходит» ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

ширина: '150px' ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

ширина: '75% ' ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

Иконки

Добавьте значок к опции или optgroup с атрибутом data-icon :

Примечание: Глификоны не включены в Bootstrap 4. Чтобы использовать FontAwesome или другую библиотеку значков, вам необходимо установить iconBase на что-то другое, кроме 'glyphicon' .

ГорчицаКетчупРелишМайонезСоус для барбекю

  <выбрать>

Пользовательское содержимое

Вставьте пользовательский HTML в параметр с атрибутом data-content :

Примечание: Эта функция вставляет HTML в DOM. По умолчанию он дезинфицируется с помощью нашего встроенного дезинфицирующего средства.

ГорчичныйКетчупРелишМайонез

  <выбрать>

Подтекст

Добавить подтекст к опции или optgroup с атрибутом data-subtext :

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса С показом Подтекст установлен в значение true.

Для параметра размера по умолчанию установлено значение «авто» . Если для размера установлено значение «авто» , меню всегда открывается, чтобы показать столько элементов, сколько позволяет окно, не обрезая его. Установите size на false , чтобы всегда показывать все элементы. Размер меню также можно указать с помощью атрибута data-size .

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальсаГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальсаГорчинаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

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

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

Выбрать / отменить выбор всех опций

Добавляет две кнопки в верхнюю часть меню - Выбрать все и Отменить выбор с data-actions-box = "true" .

ГорчичныйКетчупРелиш

Разделитель

Добавьте data-divider = "true" к параметру, чтобы превратить его в разделитель.

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

Добавьте заголовок в раскрывающееся меню, например.г. Заголовок : «Выберите приправу» или data-header = «Выберите приправу»

ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

Контейнер

Добавить меню выбора к определенному элементу, например контейнер: 'body' или data-container = ". Main-content" . Это полезно, если элемент select находится внутри элемента с overflow: hidden .

контейнер: ложный ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

контейнер: 'body' ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

  

  <выбор>
    ...

dropupAuto имеет значение true по умолчанию, что автоматически определяет, должно ли меню отображаться над или под полем выбора.Если для dropupAuto задано значение false, вручную выберите раскрывающееся меню, добавив к нему класс .dropup .

ГорчичныйКетчупРелиш