select样式改写

最新推荐文章于 2024-01-19 18:41:59 发布

不安分的魔菇

最新推荐文章于 2024-01-19 18:41:59 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_31680159/article/details/90291375

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

select样式改写

方法就是用外层的div覆盖原本的select样式，并去掉select的默认样式。option的样式找了很多资料都说是浏览器默认，不能修改，以后有时间再研究一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>New World</title>
</head>
<style type="text/css">
select, .selectXiala{
    /*select的宽高要等于div的宽高*/
    width: 236px;
    height: 36px;
    line-height: 36px;
    margin: 0 15px;
}
select{
    /*清除select的边框样式*/
    /*清除select聚焦时候的边框颜色*/
    outline: none;
    border: none;
    /*隐藏select的下拉图标*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 10px;
    color: #787878;
    background-color: #cfccc9;
}
.selectXiala{
    display: inline-block;
    font-size: 12px;
    position: relative;
}
/*使用伪类给select添加自己想用的图标*/
.selectXiala:after{
    content: "";
    width: 18px;
    height: 18px;
    background-color: #be4f48;
    background-image: url(task_images/xiala.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right center;
    position: absolute;
    top: 10px;
    right: 0;
    /*给自定义的图标实现点击下拉功能*/
    /*pointer-events: none;鼠标事件拜拜的意思。元素应用了该CSS属性，链接啊，点击啊什么的都变成了浮云。*/
    pointer-events: none;
}
</style>
<body>
    <div class="selectXiala">
        <select id="province">
            <option>省份</option>
        </select>
    </div>
    <div class="selectXiala">
        <select id="city">
            <option>城市</option>
        </select>
    </div>
    <div class="selectXiala">
        <select id="counties">
            <option>区（县）</option>
        </select>
    </div>
</body>
</html>

效果如图：
在这里插入图片描述

不安分的魔菇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select样式改写

select样式改写方法就是用外层的div覆盖原本的select样式，并去掉select的默认样式。option的样式找了很多资料都说是浏览器默认，不能修改，以后有时间再研究一下。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>New World&...
复制链接

扫一扫