CSS для "стрелки вниз" в элементе <select>?

Можно ли стилизовать стрелку вниз на выпадающем элементе выбора? т.е. (<select><option>--></option></select>)

Я подозреваю, что ответ отрицательный, потому что IE обрабатывает этот конкретный элемент. Если нет способа, кто-нибудь знает о "поддельном" выпадающем списке с использованием javaScript, который бы имитировал это поведение, но дал мне возможность настроить?

Ответы

Ответ 1

Возможно, вы можете использовать jQuery selectbox replacement. Это плагин jQuery.

Ответ 2

Там есть классное решение только для CSS для стилей выпадающих меню: http://bavotasan.com/2011/style-select-box-using-only-css/

В принципе, оберните выделение в контейнере div, создайте выбор на 18px шире, чем контейнер с прозрачным фоном, дайте переполнение: спрятаться в контейнере (отрубить стрелку, созданную браузером), и добавить свой фон изображение со стилизованной стрелкой в контейнер.

Не работает в IE7 (или 6), но серьезно, я говорю, что если вы используете IE7, вы заслуживаете менее привлекательного раскрывающегося списка.

Ответ 3

Нет, стрелка вниз - это элемент браузера. Он построен в [и разных] в каждом браузере. Однако вы можете заменить поле выбора специальным раскрывающимся списком с помощью javascript.

Ян Хэнсик упомянул плагин jQuery, чтобы сделать именно это.

Ответ 4

Выпадающий элемент на уровне платформы, вы не можете применить к нему CSS.

Вы можете наложить изображение поверх него с помощью CSS и вызвать событие click в элементе ниже.

Ответ 5

Вы не можете очень хорошо сочетать комбо с помощью CSS.

Ребята из FogBugz сделали очень хороший пользовательский комбо, используя JavaScript, так что это возможно, для этого нужно просто много работы.

Лучше придерживаться стандартного для версии 1, а затем посмотреть, стоит ли его обновлять, когда приложение находится в дикой природе.

Ответ 6

Я не знаю, является ли он стильным с CSS (возможно, не в IE), но, пожалуйста: не используйте раскрывающийся список "поддельный", используя javascript, потому что удобство использования этих вещей обычно ужасно. Среди прочего, клавиатурная навигация обычно отсутствует.

Ответ 7

Вы можете достичь этого только с помощью CSS и стрелки вниз, поскольку изображение, помещенное в абсолютное значение, имеет "указатель-события: нет"; см. мой пример ниже:

<select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}

Ответ 8

Вам нужно будет создать свой собственный раскрывающийся список, используя скрытые divs и скрытый элемент ввода, чтобы записать, какая опция была выбрана. Я предполагаю, что ссылка @Jan Hancic, которую он опубликовал, вероятно, именно то, что вы ищете.

Ответ 9

Попробуйте это

   <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>

Ответ 10

Это изменит входные данные, выберите и т.д., чтобы старый стиль не был уверен, что после этого вы сможете манипулировать: В <head> поставьте:

<meta http-equiv="MSThemeCompatible" content="NO">

Ответ 11

http://jsfiddle.net/u3cybk2q/2/ проверить на windows, iOS и Android (iexplorer patch)

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none; /*patch iexplorer*/
}

  <div class="styled-select">
       <select>
          <option>Here is the first option</option>
          <option>The second option</option>
       </select>
    </div>