HTML-элемент выбора с настраиваемой стрелкой — текст появляется над стрелкой

Zhulidov

Итак, у меня есть HTML-страница с элементом выбора, имеющим специальную стрелку.

Проблема в том, что текст элемента выбора находится над стрелкой элемента выбора.

Мне этого не надо.

Текст не должен выходить за стрелку. Вот мой CSS-код.

Стрелка выбора по умолчанию будет заменена собственным изображением.

 <div class="pudotusvalikko seura">


<select name="se1"id="se1">


<option value="1">All</option>


<option value="2">GUU</option>


<option value="3">PPP</option>


<option value="4">SBK</option>


<option value="5"selected="selected">Default value of the list is this... Default value of the list is this... Default value of the list is this...</option>


</select>


</div>

Код (CSS): А вот мой HTML-код.

Когда выбран элемент «Значение списка по умолчанию — это», его текст появится над настраиваемой стрелкой выбора.

 div.pudotusvalikko { width: 95%; box-sizing: content-box; height: 22px; padding: 0; overflow: hidden; background-color:#FFFFFF; background-image: url(/kuvat/arrow22x22.gif);/* width 22 px and height 22 px */ background-repeat: no-repeat; background-position: right center; border: 1px solid #999999; } div.seura { width: 224px; } div.pudotusvalikko select { border: none; font-size: 12px; padding: 2px; width: 110%; box-sizing: content-box; height: 18px; line-height: 18px; text-align: left; background: transparent; background: rgba(0,0,0,0); -webkit-appearance: none; }

HTML: как мне изменить свой код, если я хочу, чтобы текст элемента «Значение списка по умолчанию это.

Значение списка по умолчанию это.

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

PIT_ON

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

Я знаю, что люди используют для этого javascript и jquery, но с помощью только css.

сомневаюсь, что вы сможете.

Вы можете проделывать всевозможные трюки, например, использовать это изображение как , а затем поместить его с помощью позиции: Absolute; В качестве примера:Edit fiddle - JSFiddle - Code Playground

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

Похожие темы	Дата
Расчеты расстояния в фотошопе	19.10.2024, 18:10
Где найти фото сноубордистов?	19.10.2024, 18:10
не работает отзывчивость, текст обрезан	19.10.2024, 18:10
помогите добавить ссылку html в список	19.10.2024, 18:10
Помните MyBlogLog? Есть альтернатива?	19.10.2024, 18:10
Как исключить категорию из get_the_category?	19.10.2024, 18:10
Ищу бесплатный хостинг блогов для взрослых.	19.10.2024, 18:10
Новый проект . . . Новые вопросы с использованием столбцов	19.10.2024, 18:10
Как убрать лишние пробелы над текстом	19.10.2024, 18:10
Проблемы Aria со строкой меню навигации	19.10.2024, 18:10

HTML-элемент выбора с настраиваемой стрелкой — текст появляется над стрелкой

Zhulidov

PIT_ON

I AM

Интересно