Question

HTML5选择元素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/

问题：如何使用Unicode字符替换图像（如下面的代码示例中的favicon.ico）（例如，向下箭头，例如▼ - ▼） CSS（没有javascripting）？

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

谢谢和问候，

PS。作为FYI，基于select中封装的label元素存在多种解决方案（例如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

鉴于此选择元素CSS3样式：如何使用Unicode字符而不是背景图像？

1 个答案: