如何创建一个像下面图片展示的选择元素?
我的代码是:
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
这个功能可以用jQuery实现,但我想使用纯CSS。
如何创建一个像下面图片展示的选择元素?
我的代码是:
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
这个功能可以用jQuery实现,但我想使用纯CSS。
这是一个使用 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;
}
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
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;
}
option{
background-image:url(image.png);
background-repeat: no-repeat;
}
尽管您已将背景图像添加到选择框中,但无法隐藏右侧的处理程序。我建议使用这个: http://jamielottering.github.com/DropKick/
您只需要稍微修改CSS以适应您的需求。