我已经定制了我的< select>使用这样的：
background-color:#ececec; border:0; border:1px solid #e3e3e3; border-radius:3px; width:100%; font-family:'FuturaStdLightOblique',sans-serif; font-size:16px; color:#616263; outline:none; height: 40px;
但我也想将我的下拉箭头改为适合这种设计的外观.我想使用unicode三角形▼(▼)作为向下箭头的替代方法,如果可能,将其设置为与我的select标签中的文本相同的颜色.
关于如何在不使用CSS / HTML之外的任何事情的情况下实现这一目标的任何想法？提前致谢.
解决方法
也许是这样？
*,*:before,*:after {
Box-sizing: border-Box;
}
* {
padding: 0;
margin: 0;
}
form {
padding: 1rem;
max-width: 400px;
margin: 1em auto;
}
.select {
height: 40px;
width: 100%;
overflow: hidden;
position: relative;
border-radius: 3px;
margin-bottom: 1em;
}
.select:after {
content: "▼";
padding: 12px 8px;
position: absolute;
right: 10px;
top: 0;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
.select__field {
height: 40px;
width: 100%;
padding: 5px 15px;
color: #616263;
background-color: #ececec;
border: 1px solid #e3e3e3;
outline: none;
font-size: 16px;
-webkit-appearance: none;
/* for webkit browsers */
-moz-appearance: none;
/* for firefox */
appearance: none;
/* for modern browsers */
}
/* remove default caret for ie */
.select__field::-ms-expand {
display: none;
}
.select__field:focus:invalid {
border-color: #FD6347;
}
.select__field:required:valid {
border-color: #006400;
}
.btn-submit {
color: #fff;
display: block;
padding: 15px;
text-transform: uppercase;
background: #535C69;
width: 100%;
border: none;
border-radius: 3px;
}
<form action="#" method="post">
<div class="select">
<select name="nameValueSelect" class="select__field" required>
<option value="" selected>Choose option ...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</div>
<button type="submit" class="btn-submit">Submit</button>
</form>
