Как мне оформить форму в выпадающих списках?

Question

Я много раз искал в Интернете, но не нашел ничего полезного в том, как оформить выпадающую часть раскрывающегося списка в форме. Буду признателен за указатель в правильном направлении. Спасибо.

Answer 1

Я работаю над той же проблемой некоторое время. Придумали довольно простое решение с использованием держателя div, который короче, чем сам выпадающий список. Я также использую фоновое изображение, чтобы стрелка раскрывающихся списков выглядела так, как мне нравится. Проверьте это http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Все, что вам нужно, это div вокруг тега select и 2 CSS-класса.

HTML:

<div class="mainselection">
<select name="State" id="input7">
    <option></option>
    <option value="Alabama">Alabama</option>
    ...
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>                              
</select>
</div>

CSS:

.mainselection {
    overflow:hidden;
    width:350px;
    margin-left:35px;
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
    /* dropdown_arrow.png is a 31x28 image */
}
select {
    border:0;
    background:transparent;
    height:32px;
    border:1px solid #d8d8d8;
    width:350px;
    -webkit-appearance: none;
}

Затем, после небольшой проверки Javascript, я также могу переключить класс в div на .dropdownbad, чтобы дать ему красную рамку.

.dropdownbad {
    border:2px solid #c13339;
}

Здесь показаны состояния по умолчанию и ошибки:

Answer 2

Вы можете применять стили, используя селектор SELECT или применяя имя класса к элементу SELECT. Однако вы столкнетесь с проблемами, когда IE <8 применяет такие элементы, как границы, к элементу. </p>

Затем вы можете настроить параметры, используя селектор OPTION.

SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }

Должен дать вам выпадающий список с красной рамкой (если вы используете FF или IE8 в стандартном режиме) с жирным текстом, и варианты должны быть курсивом с зеленым фоном.

Answer 3

Проверьте этот сайт только для CSS: http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML:

<form>
    <select>
        <option>CSS</option>
        <option>HTML </option>
        <option>HTML 5</option>
    </select>
</form>

CSS:

<style>
    select {
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none; /* Removes Default Firefox style*/
        background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
        width: 100px; /*Width of select dropdown to give space for arrow image*/
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        color: #FFF;
        border-radius: 15px;
        padding: 5px;
        box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
    }
</style>

Answer 4

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

Когда у меня была такая проблам несколько месяцев назад, единственное решение, которое я нашел, состояло в том, чтобы с помощью javascript преобразовать выпадающий список в выпадающее меню ul / li, которое я мог бы стилизовать. Конечно, есть множество событий, которые требуют обработки, например, выбор значения.

К счастью, есть плагин для JQuery, который позволяет сделать это тривиальной задачей. (Указанная ссылка Brainfault для этого плагина больше не работает.)

Answer 5

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

#customer_details ul {
color: black !important;
}

Это было все, что мне нужно было изменить, поэтому я не могу сказать, что еще ты мог сделать.

Answer 6

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

Проверьте это сообщение в блоге: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 7

Как уже упоминалось выше, практически невозможно использовать прямой HTML, у меня хорошие результаты при использовании jQuery Combobox .