Как сделать разделитель в теге select?
New Window
New Tab
-----------
Save Page
------------
Exit
Как сделать разделитель в теге select?
New Window
New Tab
-----------
Save Page
------------
Exit
Ответы:
Подход с отключенной опцией, кажется, выглядит лучше и поддерживается лучше всех. Я также включил пример использования optgroup.
optgroup (таким образом, отчасти сосет):
<select>
<optgroup>
<option>First</option>
</optgroup>
<optgroup label="_________">
<option>Second</option>
<option>Third</option>
</optgroup>
</select>
отключена опция (чуть лучше):
<select>
<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>
</select>
И если вы хотите быть по-настоящему модным, используйте горизонтальный юникодный рисованный символ.
(ЛУЧШИЙ ВАРИАНТ!)
<select>
<option>First</option>
<option disabled>──────────</option>
<option>Second</option>
<option>Third</option>
</select>
disabled
опция отображается с отключенной радиокнопкой справа ...
Пытаться:
<optgroup label="----------"></optgroup>
Это старая ветка, но так как никто не опубликовал подобный ответ, я добавлю это, так как это мой предпочтительный способ разделения.
Я нахожу, что использование черточек и тому подобного является своего рода бельмом на глазу, поскольку он может не соответствовать ширине поля выбора. Итак, я предпочитаю использовать CSS для создания моих разделителей .. простая раскраска фона.
<select>
<option style="background-color: #cccccc;" disabled selected>Select An Option</option>
<option>First Option</option>
<option>Second</option>
<option style="font-size: 1pt; background-color: #000000;" disabled> </option>
<option>Third</option>
<option>Fourth</option>
<option style="font-size: 1pt; background-color: #000000;" disabled> </option>
<option>Fifth</option>
<option>Sixth</option>
</select>
Если вы не хотите использовать элемент optgroup, вместо этого поместите тире в элемент option и присвойте ему атрибут disabled. Это будет видно, но затенено.
<option disabled>----------</option>
Вместо обычного гифона я заменил его с помощью символа горизонтальной черты из расширенного набора символов, он будет выглядеть не очень хорошо, если пользователь находится в другой стране, которая заменяет этот символ, но отлично работает для меня. Существует целый ряд различных глав, которые вы можете использовать для получения отличных эффектов, и в этом нет никакого CSS.
<option value='-' disabled>――――</option>
Определите класс в CSS:
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}
Написать в HTML:
<select ...>
<option disabled class="separator"></option>
</select>
Я превращаю комментарий @Laurence Gonsalves в ответ, потому что он единственный, который работает семантически и не выглядит как хак.
Попробуйте добавить это в вашу таблицу стилей:
optgroup + optgroup { border-top: 1px solid black }
Гораздо менее наглядно, чем кучка черточек.
optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
Другой способ - использовать фоновое изображение css 1x1 для опции, которая работает только с Firefox и имеет запасной вариант «----».
<option value="" disabled="disabled" class="SelectSeparator">----</option>
.SelectSeparator
{
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
color:black;
background-repeat:repeat-x;
background-position:50% 50%;
background-attachment:scroll;
}
или использовать JavaScript (jquery) для:
-hide the select element and
-show a div which can be completely styled and
-reflect the div state onto the select for the form submit
http://tutorialzine.com/2010/11/better-select-jquery-css3/
см. также Как добавить горизонтальную линию в элемент управления выбора HTML?
Если это только WebKit, вы можете использовать <hr>
для создания реального разделителя.
Вы можете использовать их тире "-". У него нет видимых пробелов между каждым символом.
(В некоторых шрифтах!)
В HTML:
<option value = "—————————————« отключен »- ——————————— </ option>
Или в XHTML:
<option value = "—————————————« disabled = »disabled»> ————————————— </ option>
Я выбрал условно чередовать цвет и фон. Установив порядок сортировки и с помощью vue.js я сделал что-то вроде этого:
<style>
.altgroup_1 {background:gray; color:white;}
.altgroup_2{background:white; color:black;}
</style>
<option :class = {
'altgroup_1': (country.sort_order > 25),
'altgroup_2': (country.sort_order > 50 }"
value="{{ country.iso_short }}">
{{ country.short_name }}
</option