CSS для "стрелки вниз" на элементе <select>? - PullRequest
Новая
       108

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

36 голосов
/ 19 января 2009

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

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

Ответы [ 11 ]

49 голосов
/ 02 декабря 2011

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

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

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

12 голосов
/ 19 января 2009

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

5 голосов
/ 19 января 2009

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

Ян Ханчик упомянул плагин jQuery для этого.

3 голосов
/ 19 января 2009

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

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

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

3 голосов
/ 19 января 2009

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

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

2 голосов
/ 19 января 2009

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

1 голос
/ 07 июля 2014

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

<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;
}
0 голосов
/ 07 октября 2015

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

.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>
0 голосов
/ 19 мая 2011

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

<meta http-equiv="MSThemeCompatible" content="NO">
0 голосов
/ 14 февраля 2011

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

   <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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...