前端开发－CSS 实现select

最新推荐文章于 2024-05-03 09:55:16 发布

可乐代码君

最新推荐文章于 2024-05-03 09:55:16 发布

阅读量8.9k

点赞数

分类专栏：前端开发文章标签： css实现selec 重写下拉样式

本文链接：https://blog.csdn.net/fw118958/article/details/73223570

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

select下拉选择器在前端开发中很长用，但是其样式却受制于浏览器，不通的内核显示不通的效果，特别是在移动端，下拉选择往往不能统一。
实现效果：

这里写图片描述

图片2

这里写图片描述 )

代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>js模拟select</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .selectBox {
            margin: 10px 0;

            line-height: 40px;
            width: 90%;
            margin-left: 5%;
            font-size: 14px;
            position: relative;
        }

        .selectHeader {
            border-bottom: 1px solid #cccccc;
            width: 88%;
            border: 1px solid #cccccc;
        }

        .selectContent {
            list-style-type: none;
            display: none;
            position: absolute;
            top: 42px;
            z-index: 2;
            background-color: white;
            width: 88%;
            border-left: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
            left: 0px;
        }

        li {
            border-bottom: 1px solid #c4c6c7;
        }

        .content {
            padding-left: 5%;
        }

        .selectIcon {
            position: absolute;
            right: 1px;
            width: 11%;
            color: red;
            top: 0;
            border: 1px solid #cccccc;
            border-left: 0;
            text-align: center;
        }

        .selectIcon img {
            width: 15px;
            position: relative;
            top: 3px;
        }

        .selectIconUp {
            transform: rotate(180deg);
            -moz-transform: rotate(180deg); /* Firefox */
            -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
            -o-transform: rotate(180deg);
        }
    </style>
</head>
<body>
<div class="selectBox">
    <div class="selectHeader"><span class="content">省份</span></div>
    <div class="selectIcon"><img src="image/selectIcon.png" class="selectIconUp"></div>
    <ul class="selectContent">
        <li><span class="content">北京</span></li>
        <li><span class="content">河北省</span></li>
        <li><span class="content">山东省</span></li>
    </ul>
</div>
<div style="word-wrap: break-word;padding: 0 5%;">
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="select.js"></script>
<script>
    $(".selectHeader,.selectIcon").click(function () {
        $(".selectIcon img").toggleClass("selectIconUp");
        $(".selectContent").toggle();
    });
    $("li").click(function () {
        var str = $(this).children().text();
        $(".selectHeader span").text(str);
        $(".selectContent").toggle();
    })
</script>
</html>

可乐代码君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发－CSS 实现select

select下拉选择器在前端开发中很长用，但是其样式却受制于浏览器，不通的内核显示不通的效果，特别是在移动端，下拉选择往往不能统一。实现效果：图片2)代码：<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录