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

  • Автор темы DedeStoorsRot
  • Обновлено
  • 18, May 2024
  • #1
Итак, у меня есть 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: как мне изменить свой код, если я хочу, чтобы текст элемента «Значение списка по умолчанию это.

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

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

DedeStoorsRot


Рег
29 Apr, 2012

Тем
11412

Постов
15377

Баллов
72447
  • 18, May 2024
  • #2
Я не эксперт, но не верю, что это возможно сделать, используя только css, поскольку вы имеете дело с , а не с обычным div.

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

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

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

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

Troopper


Рег
01 Jan, 2011

Тем
59

Постов
212

Баллов
517
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно