我正在使用一个自定义的下拉选择菜单,根据这个解决方案:https://dev59.com/lWkw5IYBdhLWcg3wBmCA#10190884
它运行良好,但是右侧的“箭头”外观不太好看。我想让它更宽,类似于这个网站上的上下投票箭头(向左看)。
已尝试以下操作,也可以使用其中任何一种或其他选项来解决:
-将图像集成到HTML中(无法使其显示在前景v.下拉列表中)
-查找具有更宽箭头字符的字体(找不到)
-在CSS中设置background-image属性(显示默认的向下箭头)
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼"; /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
url('some_path')
选项...我只是使用了 base64 方法让你可以剪切/粘贴...但如果你想坚持使用那种方法,你可以在各种网站上对图像进行编码(在调整大小等操作之后),例如:http://www.motobit.com/util/base64-decoder-encoder.asp - Robot Woods