使用::after代替select标签的默认下拉箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
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 ;
}
</style>
<script>
// select标签中不能使用伪元素，其他不能使用的有img和input，iframe，radio，checkbox
// 原因为伪元素是位于标签之中的，select只能有option和optgroup，其他的标签中不能包含元素
// 解决方法： 使用div盒子包裹
// select: 下拉菜单
// 用法：使用一对select标签包裹，中间为<option>或者<optgroup>
</script>
</head>
<body>
<p>-------直接在select上使用::after----</p>
<select id="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>----使用div包裹，在div上使用::after------</p>
<div class="box">
<select id="sel2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<p>----使用pointer-event将不阻碍点击三角形处不触发slect的事件-----</p>
<div class="box1">
<select id="sel3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
</html>