我正在尝试设计一个 Select 标签,如下图所示:
我设法通过将 select 标记包装在 div 中来设计它。但问题是,当我单击设计的箭头时,选择标签无法正常工作或显示所有列表。
我期望的是,当我单击箭头时,选择标签应该显示所有选项。这不会发生,因为箭头部分是使用父包装元素伪元素生成的。我没有使用伪元素选择器选择标签因为 it seems to be not working .
我可以使用父包装器的 background-image
来解决这个问题,但是由于我拥有尽可能更改 html 的全部权利,我正在寻找不使用图像或 javascript 的更好方法,即使用只是 CSS。
这是 fiddle .
<div class="select-wrapper">
<select>
<option>EEE</option>
<option>ECE</option>
<option>EIE</option>
</select>
</div>
.select-wrapper {
display:inline-block;
border:1px solid #bbbbbb;
position:relative;
width:120px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin-top: 10px;
}
.select-wrapper:before{
content: "";
position:absolute;
right: 5px;
top:8px;
border-width: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666 transparent transparent transparent ;
z-index:3;
}
.select-wrapper:after {
content:"";
display:block;
position:absolute;
top:0px;
bottom:0px;
width:20px;
right:0px;
border-left:1px solid #bababa;
background-color:#ededed;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
}
select {
width:100%;
background-color:#ededed;
border:none;
outline:none;
padding:0px;
margin:0px;
position:relative;
}
最佳答案
将 pointer-events:none;
添加到您的伪元素类。
注意:IE10- 不支持指针事件属性(caniuse 表示 IE11 会支持)
所以对于 IE:
要么您必须接受箭头不可点击或
您可以使用 Modernizr 来检测是否支持指针事件 - 如果不支持 (IE10-) - 恢复为标准内置箭头。 (在这种情况下不使用您的特殊样式类)
.select-wrapper:before{
content: "";
position:absolute;
right: 5px;
top:8px;
border-width: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666 transparent transparent transparent ;
z-index:3;
pointer-events:none; /* <-- */
}
.select-wrapper:after {
content:"";
display:block;
position:absolute;
top:0px;
bottom:0px;
width:20px;
right:0px;
border-left:1px solid #bababa;
background-color:#ededed;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
pointer-events:none; /* <-- */
}
关于html - 设计选择标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19354053/