html select 自定义

最新推荐文章于 2024-01-18 16:44:52 发布

ISaiSai

最新推荐文章于 2024-01-18 16:44:52 发布

阅读量2.4k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

通过appearance:none 可以删除下拉列表的默认样式，替代一张背景图片，实现简易的下拉列表样式美化

参考文档：
http://ourjs.com/detail/551b9b0529c8d81960000007
http://www.w3school.com.cn/cssref/pr_appearance.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .test {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAAXNSR0IArs4c6QAAAH1JREFUCB09ijEKxSAQRMfwo52Q3MDG1s57iK3gEXIL72QRyZFsxWI/KyQDyzBvn2itUSkFSins+w4p5brruvA7zxO9d8w5F2TpOA5orbE555BSghACRAROCAHWWmw8cs4wxiyBO8bIGGyv1FrJe0/3fb+IvucYg57nIe43f2cVSL74N/4TAAAAAElFTkSuQmCC);
            background-repeat: no-repeat;
            padding-left:10px;
            background-position: 180px center;
            appearance:none;
            -moz-appearance:none;
           -webkit-appearance:none; /* Safari 和 Chrome */
            width:200px;
            height: 30px;
            font-style: 14px;
        }
    </style>
</head>
<body>


<select class="test" >
    <option value="">请选择</option>
    <option>A</option>
    <option>B</option>
</select>
</body>
</html>

ISaiSai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html select 自定义

通过appearance:none 可以删除下拉列表的默认样式，替代一张背景图片，实现简易的下拉列表样式美化参考文档： http://ourjs.com/detail/551b9b0529c8d81960000007 http://www.w3school.com.cn/cssref/pr_appearance.asp<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫