去除select下拉框的边框和三角下标

最新推荐文章于 2024-06-22 23:16:29 发布

qiweilong123456

最新推荐文章于 2024-06-22 23:16:29 发布

阅读量4.1k

点赞数

分类专栏：前端文章标签： html css3 css html5

本文链接：https://blog.csdn.net/qq_33745371/article/details/114639979

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

去除select下拉框的边框和三角下标

效果图

在这里插入图片描述

核心css代码

        /*去除select边框*/
        border: 0;
        background: transparent; 
        /*去除下拉框的三角下标*/
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */

完成效果图的所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <div style="width: 100%;text-align: center;">
        修改前：
        <select>
            <option>吴彦祖</option>
            <option>梁朝伟</option>
            <option>郭富城</option>
        </select>
        <br><br><br><br>
        修改后：
        <select class="trimSelect">
            <option>吴彦祖</option>
            <option>梁朝伟</option>
            <option>郭富城</option>
        </select>
    </div>
</body>
<style>
    .trimSelect {
        /*去除select边框*/
        border: 0;
        background: transparent;
        /*去除下拉框的三角下标*/
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */
    }
</style>
</html>

qiweilong123456

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
去除select下拉框的边框和三角下标

去除select下拉框的边框和三角下标效果图核心css代码 /*去除select边框*/ border: 0; background: transparent; /*去除下拉框的三角下标*/ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */
复制链接

扫一扫