[英]Style SELECT element dropdown arrow
我正在尝试将CSS样式和自定义的向下箭头添加到select
元素。 我迷上了一个事实,当单击下拉箭头时,IE / Firefox无法通过JavaScript显示下拉列表( 如之前的SO所示 )。
Square似乎找到了一种样式设置其select
元素的下拉箭头而不干扰浏览器默认行为的方法...但是我不知道他们是如何做到的。
现场观看: https : //squareup.com/market/jriegerco/football-season-kc-whiskey-red
我看到他们使用的是:before
和:after
但是如何使单击通过下拉图像并直接到达下面的select
元素? 这是什么骗术?
CSS:
.dropdown-wrapper i{
background: #FFF;
background: linear-gradient(#FFF, #FAFAFA);
border-left-color: rgba(45, 60, 72, 0.12);
border-radius: 0 3px 3px 0;
height: 40px;
line-height: 39px;
pointer-events: none;
position: absolute;
right: 1px;
top: 1px;
width: 43px;
}
.dropdown-wrapper i:before {
background: rgba(252, 252, 252, 0);
background: linear-gradient(to right, rgba(252, 252, 252, 0), #FCFCFC 20px);
content: "";
height: 40px;
position: absolute;
left: -31px;
top: 0;
width: 30px;
}
.dropdown-wrapper i:after, .button-dropdown i:after {
content: "";
margin-top: -3px;
pointer-events: none;
position: absolute;
right: 15px;
top: 50%;
}
HTML:
<div class="dropdown-wrapper">
<select class="dropdown button">
<option>Select an option...</option>
</select>
<i></i>
</div>
如何允许点击通过下拉图像并右转到下面的
select
元素?
pointer-events: none;
在CSS中,允许点击浏览图片。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.