使用::after代替select标签的默认下拉箭头

最新推荐文章于 2021-08-18 16:28:46 发布

YoungShiHao

最新推荐文章于 2021-08-18 16:28:46 发布

阅读量1.8k

点赞数 4

分类专栏：功能文章标签： css html

本文链接：https://blog.csdn.net/Y_shihao/article/details/107492738

版权

功能专栏收录该内容

12 篇文章 1 订阅

订阅专栏

使用::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等其他的标签中不能包含元素

<div class="box">
    <select id="sel2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

此时点在三角形上，事件被触发，因为三角形脱标了，覆盖在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标签重写下拉效果。如有不对，欢迎指出

Demo：
在这里插入图片描述

<!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>

YoungShiHao

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
使用::after代替select标签的默认下拉箭头

使用::after代替select标签的默认下拉箭头去掉selcet标签的默认箭头样式select { width: 200px; padding: 10px; /* 清楚select原始样式 */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; }
复制链接

扫一扫

专栏目录