改变Select三角样式

最新推荐文章于 2022-03-17 16:31:59 发布

张张张96

最新推荐文章于 2022-03-17 16:31:59 发布

阅读量843

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Girl_0919/article/details/73697050

版权

Javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

改变小三角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    select {
        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
        border: solid 1px #000;
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示小箭头图片*/
        background: url("images/z.png") no-repeat 220px center transparent;
        /*为下拉小箭头留出一点位置，避免被文字覆盖*/
        padding-right: 14px;

    }
    /*清除IE的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand {display: none;}
</style>
<body>
<select name="" id="myselect" onchange="show()">
    <option value="">--请选择--</option>
    <option value="">1</option>
    <option value="">2</option>
</select>
</body>
</html>

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变Select三角样式

改变小三角<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000;
复制链接

扫一扫

专栏目录