Эй, я искал много раз, что, как создать выберите элемент, как на рисунке нижеКак настроить элемент select через css?
Мой код
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
Это доступно в JQuery, но я хочу использовать чистый CSS.
Заранее спасибо ....
увидеть его на основе CSS меню выбора, и вы можете настроить его: - http://jsfiddle.net/XxkSC/553/
HTML
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
theres только одна проблема с кодом выше, и это когда вы нажимаете на «новую» стрелку Ничего не произошло. Кроме этого это отличное решение. – hitautodestruct
Добавлен 'указатель-события: нет,' чтобы вызвать щелчок по стрелке, поэтому щелчок по нему работает так, как ожидалось. –
option{
background-image:url(image.png);
background-repeat: no-repeat;
}
Там нет никакого способа, чтобы настроить выбор, как вы его видите на скриншоте без Javascript.
Вы можете увидеть в this example, что вы можете настраивать цвета, отступы и границы, но не сама кнопка.
Даже если вы добавили фоновое изображение в selectbox, вы не можете скрыть этот обработчик с правой стороны. Я бы порекомендовал использовать это: http://jamielottering.github.com/DropKick/
Вам просто нужно немного изменить CSS в соответствии с вашими потребностями.
вы просто попробуйте это ..custom-styling-of-the-select-elements..
Здесь полностью настраиваемый выбор, он основан на радиовходах. http://jsfiddle.net/Idered/LufkN/
Код должен быть предоставлен непосредственно в ответе, если внешняя ссылка недоступна. – Blazemonger
если вы хотите что-то, что работа во всех основных браузера включают IE7 и выше вы можете использовать мой заказ выбрать https://github.com/yanivsuzana/new_select
Невозможно добавить комментарий к Shailender Арора, так что я написал здесь Использование pointer-events:none; это позволит вам щелкнуть через стрелки и активирует поле выбора, Таким образом, CSS будет выглядеть следующим образом для этого элемента
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events:none;
}
у меня был подобный вопрос, я создал из него выходит плагин jQuery. В основном позволяет вам стилизовать внешний вид окна выбора, но при этом поддерживать универсальный дизайн для сенсорных устройств, которые получили хорошую поддержку для выбора выпадающих списков. Вот страница github: https://github.com/peec/udselect
Я действительно не уверен, что вы просите. Вы хотите, чтобы изображение соответствовало каждому из вариантов выбора? – Miles
@Miles да, я хочу фоновые изображения в опциях выбора, если это возможно в чистом css ...? –
Откажитесь от использования dropkick из-за проблемы с шириной: http: // stackoverflow.com/questions/11769888/how-to-individual-target-multiple-dropdowns-in-css-for-dropkick-plug-in – user1318135