Given this Select element CSS3 style: how to use Unicode character instead of background image?

问题

HTML5 Select element CSS3 style (no javascript) is shown below:

Listing 1. Select element CSS3 style (no 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; }

Link to sample implementation on jsfiddle: http://jsfiddle.net/re1bvt3v/

Question: how to replace the image (like favicon.ico in code sample below) with Unicode character(s) (for example, downward arrow, e.g. ▼ - ▼) using ONLY CSS (no javascripting)?

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

Thanks and regards,

PS. As FYI, multiple solutions exist based on select element encapsulated in label (e.g. http://www.codeproject.com/Tips/890021/Advanced-CSS-styling-of-HTML-SELECT-Element). The main point of my question is just how to replace the background image w/Unicode character keeping the rest of my CSS solution intact (it's rather compact and quite efficient beyond that little issue that I'm trying to resolve). Thanks.

回答1:

I think you should try to use content property like below:

select{
    position: relative;
    background: none;
}

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

About using unicode character in css you can read here: Placing Unicode character in CSS content value

来源：https://stackoverflow.com/questions/29217374/given-this-select-element-css3-style-how-to-use-unicode-character-instead-of-ba

标签

html5

css3

select

background

dropdownbox