html - 鉴于此 Select 元素 CSS3 样式 : how to use Unicode character instead of background image?

Question

HTML5选择元素CSS3样式(无javascript)如下图:

list 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/

问题:如何用 Unicode 字符(例如，向下箭头，例如 ▼ - ▼ 替换图像(如下面代码示例中的 favicon.ico) ) 仅使用 CSS(无 javascript)？

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

感谢和问候，

附言。仅供引用，基于封装在 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 字符，您可以在这里阅读: Placing Unicode character in CSS content value