Изменение цвета и внешнего вида стрелки вниз

Я хочу изменить внешний вид стрелки выпадающего списка по умолчанию, чтобы он выглядел одинаково во всех браузерах. Есть ли способ переопределить внешний вид выпадающего списка по умолчанию с помощью CSS или иным образом?Изменение цвета и внешнего вида стрелки вниз

источник

2009-03-04 Iris

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

см http://www.456bereastreet.com/archive/200409/styling_form_controls/ и http://developer.yahoo.com/yui/examples/button/btn_example07.html

источник

2009-03-04 17:00:26 TomHastjarjanto

на цели .... + 1 – repzero

<select> элемент генерируется приложением и стиль не является частью CSS/HTML спецификации.

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

источник

2009-03-04 17:01:26

Нет, вы не можете сделать это, используя фактический <select>, но есть методы, которые позволят вам «заменить» их javascript-решениями, которые выглядят лучше.

Вот хорошая статья на эту тему: <select> Something New

источник

2009-03-04 17:02:32

Если вы не планируете создать свой собственный выпадающий список (а не с помощью стандартной библиотеки выпадающего списка), вы застряли. Внешний вид управления DDL будет основываться на системе, в которой вы работаете, и/или на браузере, который выполняет вывод.

источник

2009-03-04 17:02:50 TheTXI

Нелегко сделать. Я боюсь. Проблема заключается в том, что Css не может заменить стрелку в элементе выбора, поскольку это отображается браузером. Но вы можете создать новый элемент управления из элементов div и input и Javascript для выполнения той же функции, что и select.

Попробуйте использовать некоторые из модулей автозаполнения для JQuery.

В противном случае есть некоторая информация о выборе элемента здесь:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

источник

2009-03-04 17:07:57 Richard

Вы можете добиться этого с помощью CSS, но вы не techinically изменения самого стрелка.

В этом примере я фактически скрываю стрелку по умолчанию и вместо этого отображает свою собственную стрелку.

HTML:

<div class="styleSelect"> 
    <select class="units"> 
    <option value="Metres">Metres</option> 
    <option value="Feet">Feet</option> 
    <option value="Fathoms">Fathoms</option> 
    </select> 
</div>

CSS:

.styleSelect select { 
    background: transparent; 
    width: 168px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    color: #000; 
} 

.styleSelect { 
    width: 140px; 
    height: 34px; 
    overflow: hidden; 
    background: url("images/downArrow.png") no-repeat right #fff; 
    border: 2px solid #000; 
}

источник

2013-01-31 03:10:23 Sphvn

Это приятное решение, однако есть две проблемы: 1. в IE8 синий фон после выбора находится над изображением стрелки, 2. в Opera изображение стрелки не visib ле. :( – mj82

+14

Это больше предназначалось для руководства, а не для меня, для завершения всей работы для OP – Sphvn

Спасибо, это все, что я хотел. – sohaib

Мы использовали YUI, Избранным, и в настоящее время с помощью плагина Jquery Select2: https://select2.github.io/

Это довольно прочный, стрелка является просто кончик айсберга.

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

источник

2016-01-13 01:21:13 sb333

Это может быть сделано путем:

select{ 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
}

select{ 
 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
 
    
 
    
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0px; 
 
    appearance: none; 
 
    outline-width: 0; 
 
    
 
    padding: 10px 10px 10px 5px; 
 
    display: block; 
 
    width: 10em; 
 
    border: none; 
 
    font-size: 1rem; 
 
    
 
    border-bottom: 1px solid #757575; 
 
    }

<div class="styleSelect"> 
 
    <select class="units"> 
 
    <option value="Metres">Metres</option> 
 
    <option value="Feet">Feet</option> 
 
    <option value="Fathoms">Fathoms</option> 
 
    </select> 
 
</div>

источник

2017-03-04 16:53:40 Lambder

как бы вы изменили цвет с помощью этого метода? – jbodily

использовать другой фон svg. – Lambder

Попробуйте изменить цвет вашего "граница-топ" атрибут к белым

источник

2017-04-27 06:46:50 Bojan

Изменение цвета и внешнего вида стрелки вниз

ответ

Смежные вопросы