Как настроить элемент select через css?

Эй, я много раз искал, как создать элемент select, как показано ниже.

enter image description here

Мой код

<select>
    <option>-- Select City --</optoin>
    <option>Delhi</option>
    <option>Gurgaon</option>
</select>

Это доступно в jquery, но я хочу использовать pure css.

Спасибо заранее....

Ответы

Ответ 1

см. его меню выбора на основе 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;
}

Ответ 2

Здесь полностью настраиваемый выбор, основанный на радиовходах. http://jsfiddle.net/Idered/LufkN/

Ответ 3

Не могу добавить комментарий к Shailender Arora, поэтому я написал его здесь Используя 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;
    }

Ответ 4

Невозможно настроить выбор, как вы видите на скриншоте без Javascript.

Вы можете увидеть в этот пример, который вы можете настроить цвета, отступы и границы, но не сама кнопка.

Ответ 5

option{
  background-image:url(image.png);
  background-repeat: no-repeat;
}

Ответ 6

Даже если вы добавили фоновое изображение в selectbox, вы не можете скрыть этот обработчик с правой стороны. Я бы рекомендовал использовать это: http://jamielottering.github.com/DropKick/

Вам просто нужно немного изменить CSS в соответствии с вашими потребностями.

Ответ 8

если вы хотите, чтобы что-то, что работает во всех основных браузерах, включало ie7 и выше вы можете использовать мой пользовательский выбор https://github.com/yanivsuzana/new_select

Ответ 9

У меня была аналогичная проблема, я создал из него плагин jQuery. В основном позволяет вам стилизовать внешний вид окна выбора, но при этом поддерживать универсальный дизайн для сенсорных устройств, которые получили хорошую поддержку для выбора выпадающих списков. Вот страница github: https://github.com/peec/udselect