我必须使用SELECT表单创建下拉列表。我想使用一个fontaweshowes图标：" fa-angle-down"(未选择列表时(和第一个列表项目旁边的" fa angle-up"(当列表被扩展时(。我怎样才能做到这一点？我必须使用javascript还是jquery？
<body>
<fieldset>
<legend>numbers</legend>
<select name="numbers">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</fieldset>
</body>
我认为您正在寻找浏览器为您的选择案例使用自定义CSS，并使用下拉列表的自定义样式。
您需要首先用跨度包装选择元素，然后添加您将在伪类课之前和之后添加的选择字段。
在伪级之前，我们将为选择区域的切换按钮添加背景颜色，在伪级后，我们将使用fontawesome glyph添加角度图标。
.selectwrap {
position:relative;
}
.selectwrap::before {
content:'';
right:1px;
top:-8px;
width:30px;
height:38px;
background:#ffffff;
position:absolute;
pointer-events:none;
display:block;
border-radius: 3px;
}
.selectwrap::after {
content:"f106";
font-family: "FontAwesome";
font-size: 12px;
right: 12px;
top:3px;
color: #c4d3dc;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
.selectwrap:focus::after {
content: "f107";
}
.selectwrap select {
padding:7px 15px;
height: 40px;
margin: 0;
background: #eff3f5;
border:1px solid #e4ebef;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
cursor:pointer;
width: 300px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<span class="selectwrap">
<select>
<option selected="'selected'" value="0">Sunday</option><option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
</span>希望我的答案对您有帮助。