【前端笔记】之一个简单好看的的下拉菜单 ：select下拉框

时间：2024-02-20 20:02:44

1.前言：

​自己写项目的时候，有时候为了美化页面，比如说input框，radio，select下拉框等等，默认的样式很大可能不满足我们的需求，可能由于强迫症的感觉，一个很丑的组件，很影响观感,继而影响改前端样式的动力。搜模板吧，不仅浪费时间，而且网站可能让你注册，让你扫码，烦都烦死。所以 在此记录一下select的样式。

2. 先看效果

我们一般找资源的时候，都比较喜欢先看实现后的效果，看是否满足我们的需求，才决定是否要复制粘贴到我们的项目中，深有同感，所以不废话，直接先看效果：

select

​

​ 第一个，是通过替代的方式，使用div+ul 实现下拉菜单的样式，代码如下：（完整代码最后会有复制）

<div class="select_box">
    <font>&#8250;</font>
    <span>选项1</span>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</div>

select1

第二个，是select 的标签实现的，我们需要在select 标签中添加一个class="select_box" ,也是我项目中需要的，不过美中不足的是：该select 中的option的样式还是默认的样式，无法更改，搜了一下，也是没搜到办法。（小小的遗憾）

<select name="department" id="department" class="select_box">
	 <option value="0">==选项==</option>
	 <option value="1">选项1</option>
	 <option value="2">选项2</option>
	 <option value="3">选项3</option>
	 <option value="4">选项4</option>
	 <option value="5">选项5</option>
	 <option value="6">选项6</option>
 </select>

select2

3.贴完整代码：

注意：完整代码需要 JQuery 的支持，需要自己去找一个 jQuery.js ，之后替换为自己的文件路径。

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .select_box {
            width: 200px;
            height: 36px;
            border: 1px solid #3CF;
            position: relative;
            float: left;
            margin-right: 50px;
        }

        .select_box span {
            display: inline-block;
            width: 200px;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
            text-indent: 10px;
        }

        .select_box .span_aa {
            color: #C36;
        }

        .select_box ul {
            width: 200px;
            position: absolute;
            top: 36px;
            left: -1px;
            border: 1px solid #3CF;
            display: none;
            background: #fff;
        }

        .select_box li {
            cursor: pointer;
            line-height: 36px;
            text-indent: 10px;
        }

        .select_box li:hover {
            background: #39F;
            color: #fff;
        }

        .select_box font {
            position: absolute;
            right: 10px;
            font-size: 26px;
            font-family: "微软雅黑";
            color: #3CF;
            transform: rotate(90deg);
        }
	
    </style>
</head>
<body class="color-8">
<div class="select_box">
    <font>&#8250;</font>
    <span>选项1</span>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</div>

<select name="department" id="department" class="select_box">
	 <option value="0">==选项==</option>
	 <option value="1">选项1</option>
	 <option value="2">选项2</option>
	 <option value="3">选项3</option>
	 <option value="4">选项4</option>
	 <option value="5">选项5</option>
	 <option value="6">选项6</option>
 </select>

<!--jquery支持-， 注意：替换为自己的js路径--->
<script src="js/jquery-3.4.1.js"></script>

<script>
    $(function () {
        var s_title = $(".select_box span");
        var s_select = $(".select_box li");
        s_title.click(function (e) {

            $(this).addClass("span_aa");

            $(this).next("ul").show();

            e.stopPropagation();

        });

        s_select.click(function () {

            var s_text = $(this).html();

            var s_title_2 = $(this).parent(\'ul\').prev("span");

            s_title_2.html(s_text).removeClass("span_aa");

            $(this).parent(\'ul\').hide();

        });

        $(document).click(function () {

            s_title.removeClass("span_aa");

            $(".select_box ul").hide();

        });
    });

</script>
</body>
</html>

4.来源

​ 这是我在写项目，搜资源的时候，找的，乱七八糟下载了一大堆。

​ 我贴上来源地址：https://www.jb51.net/article/84095.htm

相关文章