【前端笔记】之⼀个简单好看的的下拉菜单：select下拉框
1.前⾔：
⾃⼰写项⽬的时候，有时候为了美化页⾯，⽐如说input框，radio，select下拉框等等，默认的样式很⼤可能不满⾜我们的需求，可能由于强迫症的感觉，⼀个很丑的组件，很影响观感，继⽽影响改前端样式的动⼒。搜模板吧，不仅浪费时间，⽽且⽹站可能让你注册，让你扫码，烦都烦死。所以在此记录⼀下select的样式。
2. 先看效果
我们⼀般资源的时候，都⽐较喜欢先看实现后的效果，看是否满⾜我们的需求，才决定是否要复制粘贴到我们的项⽬中，深有同感，所以不废话，直接先看效果：
第⼀个，是通过替代的⽅式，使⽤div+ul 实现下拉菜单的样式，代码如下：（完整代码最后会有复制）
<div class="select_box">
<font>›</font>
<span>选项1</span>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
第⼆个，是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>
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;
color: #3CF;
transform: rotate(90deg);
}
</style>
</head>
<body class="color-8">
<div class="select_box">
<font>›</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 () {
veClass("span_aa");
$(".select_box ul").hide();
});
});
</script>
</body>
</html>
4.来源
这是我在写项⽬，搜资源的时候，的，乱七⼋糟下载了⼀⼤堆。我贴上来源地址：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论