使用::after代替select标签的默认下拉箭头
- 去掉selcet标签的默认箭头样式
select { width: 200px; padding: 10px; /* 清楚select原始样式 */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } /* --ie清除--*/ select::-ms-expand{ display: none; }
- 使用伪元素::after画出三角形
.box:after { position: absolute; right: 10px; top: 50%; transform: translateY(-25%); width: 0px; height: 0px; /* 使用伪元素需加上content，否则无效 */ content: ''; border: 10px solid transparent; border-top: 10px solid #000 ; }
select标签中不能使用伪元素，其他不能使用的有img和input，iframe
原因：伪元素是位于标签之中的，select中option和optgroup会生效，img和input，iframe等其他的标签中不能包含元素
id="sel2">
- 此时点在三角形上，事件被触发，因为三角形脱标了，覆盖在select标签之上，点不到select标签
解决：在给三角形的css添加pointer-event：none；
.box:after { position: absolute; /* pointer-events设置为none，使元素不会成为鼠标事件的目标，让鼠标事件可以指向后代元素 */ pointer-events: none; right: 10px; top: 50%; transform: translateY(-25%); width: 0px; height: 0px; content: ''; border: 10px solid transparent; border-top: 10px solid #000 ; }
- 至此，select标签的下拉箭头被替换了，也能点击。如果想修改option的样式，推荐使用ul和li标签重写下拉效果。如有不对，欢迎指出
文章图片
Document
>
select {
width: 200px;
padding: 10px;
/* 清楚select原始样式 */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* --ie清除--*/
select::-ms-expand{ display: none;
}#sel1:after {
position: absolute;
top: 0;
width: 0px;
height: 0px;
content: '';
border: 20px solid transparent;
border-top: 20px solid #000 ;
z-index: 1;
}
.box,.box1 {
position: relative;
display: inline-block;
}
.box:after {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-25%);
width: 0px;
height: 0px;
/* 使用伪元素需加上content，否则无效 */
content: '';
border: 10px solid transparent;
border-top: 10px solid #000 ;
}
.box1:after {
position: absolute;
/* pointer-events设置为none，使元素不会成为鼠标事件的目标，让鼠标事件可以指向后代元素 */
pointer-events: none;
right: 10px;
top: 50%;
transform: translateY(-25%);
width: 0px;
height: 0px;
content: '';
border: 10px solid transparent;
border-top: 10px solid #000 ;
}
>
// select标签中不能使用伪元素，其他不能使用的有img和input，iframe，radio，checkbox
// 原因为伪元素是位于标签之中的，select只能有option和optgroup，其他的标签中不能包含元素
// 解决方法： 使用div盒子包裹
// select: 下拉菜单
// 用法：使用一对select标签包裹，中间为
