给定这个Select元素CSS3样式:如何使用Unicode字符而不是背景图像

Question

HTML5 Select元素CSS3样式（无javascript）如下所示：

清单1。选择元素CSS3样式（无javascript）：

select 
{
   border                   : 1px solid #e9e9e9;
   width                    : 12em;
   height                   : 2.5em;
   font-family              : Arial, Calibri;
   font-size                : 1em;
   color                    : #303030;
   padding                 : 0.3em 0.5em 0.3em 0.5em;
   -moz-border-radius       : 0.5em;
   -webkit-border-radius    : 0.5em;
   border-radius            : 0.5em;
   box-shadow               : inset 0 0 5px #a0a0a0;
   -webkit-appearance       : none;
   -moz-appearance          : none;
   appearance               : none;
   background               : url(http://webinfocentral.com/images/favicon.ico) 95% / 10% no-repeat #fdfdfd;
}
 select option
{
    font-size           : 1em;
    padding             : 0.2em 0.4em 0.2em 0.4em;
}
select option[selected]{ font-weight:bold}
select option:nth-child(even) { background-color:#f5f5f5; }

链接到jsfiddle上的示例实现：http://jsfiddle.net/re1bvt3v/

问题：如何使用ONLY CSS（无Java脚本）将图像（如下面代码示例中的favicon.ico）替换为Unicode字符（例如向下箭头，例如▼；-▼）？

background : url(http://webinfocentral.com/images/favicon.ico) 95% / 10% no-repeat #fdfdfd;

谢谢和问候，

PS。作为参考，基于封装在label中的select元素存在多种解决方案（例如。http://www.codeproject.com/Tips/890021/Advanced-CSS-styling-of-HTML-SELECT-Element)。我的主要问题是如何用Unicode字符替换背景图像，以保持我的CSS解决方案的其余部分完好无损（除了我试图解决的那个小问题之外，它相当紧凑且非常高效）。谢谢

Answer 1

我认为您应该尝试使用如下内容属性：

select{
    position: relative;
    background: none;
}
select:after{
    content: '2193';
    position: absolute;
    right: 5px;
    top: 10px;
    font-size: 12px;
    line-height: 1;
}

关于在css中使用unicode字符，您可以在此处阅读：在CSS内容值中放置Unicode字符