- Как добавить горизонтальную линию в элемент управления html select?
- 9 ответов
- Как добавить горизонтальную линию в элемент управления html select?
- Как добавить горизонтальную линию в элемент управления html select?
- ОТВЕТЫ
- Ответ 1
- Ответ 2
- Ответ 3
- Ответ 4
- Ответ 5
- Ответ 6
- Ответ 7
- Ответ 8
- Ответ 9
- Ответ 10
- Как добавить горизонтальную линию в элемент управления выбора HTML?
- Разделители внутри select HTML
- Функция Bizarre WebKit / Blink
- Работать в рамках ограниченной семантики Web с optgroup
Как добавить горизонтальную линию в элемент управления html select?
Как добавить горизонтальную линию (тег
) в раскрывающемся списке или в элементе выбора в HTML?
Вы также можете использовать «optgroups» для достижения аналогичной концепции, см. stackoverflow.com/questions/899148/html-select-option-separator
9 ответов
Вообще говоря, это не функция , большинство браузеров имеют очень плохое управление стилем для этого элемента управления. В Firefox вы можете сделать следующее (но не работает в других браузерах):
Но, вообще говоря, единственный способ — поставить опцию через дефис и попытаться сделать ее невыбираемой.
Разделитель для инвалидов — приятное прикосновение! Но это может создать проблемы при выполнении любых операций с использованием selectedIndex .
@VarunNatraaj: Да, я никогда не сталкивался с необходимостью использовать selectedIndex сам, но вам нужно будет учитывать элементы с .disabled во время любых подсчетов, расчетов, движений этого индекса.
Использование optgroup позволит вам избежать проблемы с selectedIndex, а также автоматического отключения.
Я сталкивался с этой проблемой раньше, и единственный кросс-браузерный способ добиться этого — использовать юникод, рисующий горизонтальные символы. Браузеры не отображают пробелы между этими символами. Конечно, это также означает, что ваша страница должна принимать юникод (utf-8), что в наши дни является почти данностью.
Вот демонстрация, в которой используется «светлый горизонтальный» отметка на коробке:
Существуют различные варианты символов блока Unicode, которые вы можете использовать в качестве разделителя, которые должны отображаться без пробелов между ними:
Вы также можете включить их с помощью escape-символов HTML (копирование и вставка обычно работают, вставляя последовательность символов UTF-8, которую браузеры, похоже, уважают, но если это не вариант), это для четырех светлых горизонтальных меток в строке :
Здорово! Ваш вариант символа-разделителя выглядит потрясающе в IE! Также я предлагаю использовать метку optgroup вместо опции, потому что вы сможете изменить цвет метки optgroup, но не в отключенной опции (IE).
Элемент select может содержать только элементы optgroup или option , а элементы option могут содержать только текст. Разметка типа
запрещена.
Я бы использовал такой элемент для создания разделителя:
Вы можете рассмотреть разметку следующим образом:
Однако рендеринг в разных браузерах слишком сильно различается, чтобы быть приемлемым.
Когда я проверял свой ответ, я попробовал
Как добавить горизонтальную линию в элемент управления html select?
Как добавить горизонтальную линию (тег
) в раскрывающемся меню или в элементе управления select в HTML?
Вообще говоря, это не особенность , большинство браузеров имеют очень плохое управление стилем для этого элемента управления. В Firefox вы можете сделать следующее (хотя не работает в других браузерах):
Но, вообще говоря, единственный способ – включить опцию с тире и попытаться сделать ее невыбираемой.
Я столкнулся с этой проблемой раньше, и единственным кросс-браузерным способом для этого является использование горизонтального символа в виде юникода. Браузеры не отображают пробелы между этими символами. Конечно, это также означает, что ваша страница должна принимать unicode (utf-8), которая почти соответствует данным дням.
Вот демонстрационная версия, в которой используется light horizontal“:
В качестве разделителя можно использовать различные параметры символа в кодировке Юникода, которые должны отображаться без пробелов между ними:
Вы также можете включить их с помощью символов escape-символов HTML (копирование и вставка обычно работают, вставляя последовательность символов UTF-8 в поле, которые, похоже, уважают браузеры, но если это не вариант), это для четырех световых горизонтальных меток в строке:
Элемент select может содержать только элементы optgroup или option , а элементы option могут содержать только текст. Разметка типа
запрещена.
Я бы использовал такой элемент, чтобы создать разделитель:
Вы можете рассмотреть разметку следующим образом:
Тем не менее, рендеринг между разными браузерами может быть слишком большим, чтобы быть приемлемым.
Вы можете использовать em emash “-“. У каждого персонажа нет видимых пробелов.
вы также можете добавить класс css в пустой с фоновым изображением
Если вы хотите вставить сортировщик в тег, вы можете сделать что-то вроде этого: http://jsfiddle.net/k4emic/4CfEp/
Однако это не рекомендуется.
Я использовал JSP, но вы увидите, что это то же самое.
Я повторяю через mapMap LinkedHashMap, где, если key >= 50000, то это разделитель строк, иначе это обычный вариант выбора. (Мне это нужно в моем проекте)
Это старый пост, но я столкнулся с большим количеством постов, в которых никто даже не удосужился найти элегантное решение, хотя оно и простое.
Все пытаются добавить что-то между тегами , но никто не задумывался о том, чтобы СТИЛИРОВАТЬ , что является единственным способом сделать это и выглядеть потрясающе.
Чтобы легко быть правдой? Посмотрите
Я поместил стиль с HTML для простоты.
Это больше не работает, понятно, не знаю, почему люди продолжают публиковать ответы. Правила изменились, это решение сработало, я сам им пользуюсь. В настоящее время я использую плагины jQuery для этого.
Позднее редактирование: каждый может использовать удивительный плагин selectpicker
что лучше, вы можете использовать стили семантики-ui.
приведенный выше код работает… 100% лучшие результаты для outpers
Как добавить горизонтальную линию в элемент управления html select?
Как добавить горизонтальную линию (тег
) в раскрывающемся меню или в элементе управления select в HTML?
ОТВЕТЫ
Ответ 1
Вообще говоря, это не особенность , большинство браузеров имеют очень плохое управление стилем для этого элемента управления. В Firefox вы можете сделать следующее (хотя не работает в других браузерах):
Но, вообще говоря, единственный способ — включить опцию с тире и попытаться сделать ее невыбираемой.
Ответ 2
Я столкнулся с этой проблемой раньше, и единственным кросс-браузерным способом для этого является использование горизонтального символа в виде юникода. Браузеры не отображают пробелы между этими символами. Конечно, это также означает, что ваша страница должна принимать unicode (utf-8), которая почти соответствует данным дням.
Вот демонстрационная версия, в которой используется light horizontal»:
В качестве разделителя можно использовать различные параметры символа в кодировке Юникода, которые должны отображаться без пробелов между ними:
Вы также можете включить их с помощью символов escape-символов HTML (копирование и вставка обычно работают, вставляя последовательность символов UTF-8 в поле, которые, похоже, уважают браузеры, но если это не вариант), это для четырех световых горизонтальных меток в строке:
Ответ 3
Элемент select может содержать только элементы optgroup или option , а элементы option могут содержать только текст. Разметка типа
запрещена.
Я бы использовал такой элемент, чтобы создать разделитель:
Вы можете рассмотреть разметку следующим образом:
Тем не менее, рендеринг между разными браузерами может быть слишком большим, чтобы быть приемлемым.
Ответ 4
Вы можете использовать em emash «-«. У каждого персонажа нет видимых пробелов.
Ответ 5
вы также можете добавить класс css в пустой с фоновым изображением
Ответ 6
Если вы хотите вставить сортировщик в тег, вы можете сделать что-то вроде этого: http://jsfiddle.net/k4emic/4CfEp/
Однако это не рекомендуется.
Ответ 7
Я использовал JSP, но вы увидите, что это то же самое. Я повторяю через mapMap LinkedHashMap, где, если key >= 50000, то это разделитель строк, иначе это обычный вариант выбора. (Мне это нужно в моем проекте)
Ответ 8
Это старый пост, но я столкнулся с большим количеством постов, в которых никто даже не удосужился найти элегантное решение, хотя оно и простое.
Все пытаются добавить что-то между тегами , но никто не задумывался о том, чтобы СТИЛИРОВАТЬ , что является единственным способом сделать это и выглядеть потрясающе.
Чтобы легко быть правдой? Посмотрите
Я поместил стиль с HTML для простоты.
Это больше не работает, понятно, не знаю, почему люди продолжают публиковать ответы. Правила изменились, это решение сработало, я сам им пользуюсь. В настоящее время я использую плагины jQuery для этого.
Позднее редактирование: каждый может использовать удивительный плагин selectpicker
Ответ 9
что лучше, вы можете использовать стили семантики-ui.
приведенный выше код работает. 100% лучшие результаты для outpers
Ответ 10
Как добавить горизонтальную линию в элемент управления выбора HTML?
Вообще говоря, это не особенность , большинство браузеров имеют очень плохое управление стилем для этого элемента управления. В Firefox вы можете сделать следующее (хотя не работает в других браузерах):
Но, вообще говоря, единственный способ — включить опцию с тире и попытаться сделать ее невыбираемой.
Отключенный сепаратор — Приятное прикосновение! Но это может создать проблемы при выполнении любых операций с использованием selectedIndex .
@VarunNatraaj: Да, я никогда не сталкивался с необходимостью использовать selectedIndex самостоятельно, но вам нужно будет учитывать элементы с .disabled при любых подсчетах, вычислениях и перемещениях этого индекса.
Использование optgroup позволит вам избежать проблемы с selectedIndex, а также будет автоматически отключено.
@Chris-Jr Chris-Jr Обратите внимание, что год поддержки optgroup был не таким универсальным, как сейчас.
Я столкнулся с этой проблемой раньше, и единственным кросс-браузерным способом для этого является использование горизонтального символа в виде юникода. Браузеры не отображают пробелы между этими символами. Конечно, это также означает, что ваша страница должна принимать unicode (utf-8), которая почти соответствует данным дням.
Вот демонстрационная версия, в которой используется light horizontal»:
В качестве разделителя можно использовать различные параметры символа в кодировке Юникода, которые должны отображаться без пробелов между ними:
Вы также можете включить их с помощью символов escape-символов HTML (копирование и вставка обычно работают, вставляя последовательность символов UTF-8 в поле, которые, похоже, уважают браузеры, но если это не вариант), это для четырех световых горизонтальных меток в строке:
Большой! Ваш вариант символа разделителя выглядит потрясающе в IE! Также я предлагаю использовать метку optgroup вместо опции, потому что вы сможете изменить цвет метки optgroup, но не в отключенной опции (IE).
Элемент select может содержать только элементы optgroup или option , а элементы option могут содержать только текст. Разметка типа
запрещена.
Я бы использовал такой элемент, чтобы создать разделитель:
Вы можете рассмотреть разметку следующим образом:
Тем не менее, рендеринг между разными браузерами может быть слишком большим, чтобы быть приемлемым.
Когда я проверял свой ответ, я попытался
Разделители внутри select HTML
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Вы не можете знать, насколько широко будет отображаться меню, особенно на мобильных ОС, так что имитированный разделитель, созданный из подчеркиваний, может быть перенесен.
Вы не можете знать, каким шрифтом он будет отображаться, поэтому, возможно, подчеркивания не образуют непрерывную линию. (Другие символы Unicode дают еще более запутанные результаты.)
Вспомогательные технологии не объявляют имитированный разделитель единым целым, в худшем случае зачитывают «подчеркивание подчеркивание подчеркивание подчеркивание…» (К сожалению, мы не можем добавить role=»separator».)
Функция Bizarre WebKit / Blink
Если мы вставляем между элементами option разделитель hr через скрипт, он отображается как нативный разделитель выпадающего меню (по крайней мере, на MacOS):
Как ни странно, это не работает, если он находится в исходном HTML. По-моему, это одна из тех функций, которые запрашивала команда Apple Mail, как и странные старые -webkit-line-clamp. В конце концов, в Windows нет даже разделителей в выпадающих меню.
Возможно, это может работать в стандартном HTML, без необходимости использовать скрипты. дает возможность использовать дочерние элементы hr для этого эффекта. Но это только специфичная для движка особенность. Что еще мы можем сделать?
Работать в рамках ограниченной семантики Web с optgroup
Вам нужно разделить меню на части, да? Ну, единственный реальный способ сделать это в HTML — optgroup. Это не разделитель, но функционально это эквивалентно — section это своего рода hr.