如何自定义select元素通过css？ [英] How to customized select element through css?

问题描述

我多次搜索如何创建一个select元素，如下图所示

Hey I searched many times that how to create a select element like the below image

我的代码是

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

这在jquery中可用，但我想使用纯css。

This is available in jquery but I want to use pure css.

感谢提前....

推荐答案

查看其基于css的选择菜单， ： - http://jsfiddle.net/XxkSC/553/

see its css based select menu and you can customize it :- 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;
}

这篇关于如何自定义select元素通过css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！