Я работаю над веб-страницей, которая включает раскрывающийся список Select. Моя задача - сделать его "функциональным", т.е. Отображать правильное содержание и в то же время сделать его "разумным хорошим взглядом". Веб-дизайнер придет позже, чтобы отполировать "внешний вид".
Меня озадачивает то, что нет хорошего способа стилизовать элемент HTML вместо элемента css. Все рамки/решения, которые я нашел, включают следующее:
Скрыть исходный элемент выбора
Используйте комбинацию <div> <span>
или <ul> <li>
чтобы смоделировать собственный блок выбора
<div> <span>
.Я должен написать клиент селена, чтобы проверить поведение веб-страницы.
Если я напишу его, чтобы протестировать его в соответствующем поле выбора, дальнейшее стилизацию выпадающего меню с помощью 3 шагов, показанных выше, нарушит тест, потому что селен не позволяет мне нажимать на скрытый элемент.
Если я применил стиль сейчас и напишу клиенту селена, чтобы щелкнуть имитирующий <div><span>
, я также рискую сломанным тестом в будущем. потому что веб-дизайнер может выбрать другой способ стилизации окна выбора позже, а элемент, который я тестирую сегодня, можно удалить со страницы.
Мне интересно, есть ли у кого-то подобный опыт раньше и что лучше всего подходит для решения таких проблем.
Я обнаружил, что у вас есть два варианта (с которыми вы столкнулись).
Минимальный стиль на нативном компоненте. Некоторые браузеры позволяют вам делать несколько стилей, но в основном такие вещи, как высота и ширина окна выбора, ничего необычного. Вероятно, это лучший выбор, чтобы не сломать вещи, так как он является родным и зависит от браузера, а не от подключаемого модуля.
Или вы можете использовать подключаемый модуль, как вы обнаружили, что делает какую-то причудливую работу для создания div поверх элемента. Но есть множество разнообразных плагинов с различным пробегом между ними.
В текущем проекте мне понадобился пользовательский флажок. То, что делает мой скрипт, это создать div за поле выбора и превратить поле выбора в непрозрачность: 0. Пользователь думает, что они нажимают на модный div, но на самом деле попадают в поле выбора перед ним (хотя это не видно), Когда они нажимают на него, он выдает раскрывающийся список с обычным выбором. Довольно круто. Лучшая часть состоит в том, что он использует только javascript на загрузке страницы для создания div, все остальное является встроенным элементом управления. Если вам нужна дополнительная информация об этом, я могу привести пример, но это то, что я нашел в Интернете. Так что, возможно, вы тоже это видели.