前端开发－CSS 实现select

来源：互联网发布：js form ajax 提交编辑：程序博客网时间：2024/06/08 17:43

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 0