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;
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 () {
s_title.removeClass("span_aa");
$(".select_box ul").hide();
});
});
</script>
</body>
</html>
4.來源
這是我在寫項目，搜資源的時候，找的，亂七八糟下載了一大堆。
我貼上來源地址：https://www.jb51.net/article/84095.htm