我在这里使用了一个自定义的选择/下拉菜单:https://stackoverflow.com/a/10190884/1318135纯CSS选择菜单/下拉菜单:如何制作自定义右箭头?
这个功能很好,除了右边的'箭头'看起来不太好。我希望它更宽一些,外观与本网站上的向上/向下投票箭头相似(请看左侧)。
试图使用任何这些或其他的选择以下,开到一个解决方案:
-Integrating的图像转换成HTML(无法得到它在前台v显示下拉)
-Location的字体具有更宽箭头的字符(找不到一个)在CSS
- 设置背景图片属性(而不是显示默认的向下箭头)
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;
}
是什么,在它的结束串巨大?!?! – user1318135 2012-08-03 05:57:51
base64中的图像(可能只是图像的路径,但因为它是一个小提琴,所以我用这个字符串而不是单独的文件) – 2012-08-03 10:51:31
这是我推测的独角兽吗? – Knu 2012-08-03 13:55:39