Как настроить элемент HTML «select» с помощью CSS 3?

Question

Я не могу изменить размер выбранного элемента формы HTML, не имея неприятных результатов, и совершенно не зависит от браузера.

Знаете ли вы метод, подобный тому, который использовал 37 Signals (к сожалению, только для Webkit): http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Или любой метод / обходной путь, который работает на FF / safari / Chrome (и, возможно, IE ;-)?

Я создаю форму с огромными элементами: легко иметь огромные кнопки или вводить [текст], но пока невозможно сделать то же самое с select.

Спасибо!

Answer 1

К сожалению, это все еще невозможно надежно во всех браузерах и операционных системах. Путь - это решение на основе JavaScript, которое эмулирует поле выбора.

Answer 2

Вы можете стилизовать поле выбора с помощью этого jQuery:

http://www.adamcoulombe.info/lab/jquery/select-box/

Его легко реализовать и он хорошо работает (по умолчанию выбирается) в браузерах, которые его не поддерживают (IE6).

Плагин jQuery (включен в ссылку для скачивания):

customSelect.jquery.js

Javascript:

$(document).ready(function(){
    $('select').customStyle();
});

CSS:

.customStyleSelectBox {
/* Styles For Your Select Box */
}

.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}

Просмотр изображения:

Answer 3

К сожалению, CSS3 не содержит каких-либо дополнительных функций для оформления полей <select>. Кроме того, любая попытка стилизовать их с помощью CSS закончится кросс-браузерным беспорядком chop suey.

Можно пойти по пути Javascript / jQuery, вот jQuery , который я использовал в прошлом. Если у пользователя отключен Javascript, он по умолчанию будет использовать обычный элемент <select>.

Не стесняйтесь искать решение, которое соответствует вашим потребностям, вам может понадобиться ванильное Javascript, если вы еще не используете jQuery.

Answer 4

Чтобы скрыть стрелку выбора, вы можете использовать этот обходной путь

select {
    overflow:hidden;
    width: 120%;
}