Вопрос по html, css – Как настроить выбор элемента через CSS?

10

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

enter image description here

Мой код

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

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

Заранее спасибо ....

Я действительно не уверен, что вы спрашиваете. Вы хотите, чтобы изображение было позади каждого из вариантов выбора? Miles
@ Мили да, я хочу, чтобы фоновые изображения в некоторых вариантах, если это возможно в чистом CSS ...? Rohit Azad
Не рекомендуется использовать dropkick из-за проблемы ширины:stackoverflow.com/questions/11769888/… user1318135

Ваш Ответ

9   ответов
3

поэтому я написал это здесь С использованием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;
    }
0

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

Вам просто нужно немного изменить CSS, чтобы удовлетворить ваши потребности.

20

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;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededpointer-events: none;Error: User Rate Limit Exceeded
0

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

0

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

1

как вы видите его на своем скриншоте без Javascript.

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

6
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0
option{
  background-image:url(image.png);
  background-repeat: no-repeat;
}

Похожие вопросы