С учетом этого Выберите элемент CSS3 style: как использовать символ Unicode вместо фонового изображения?

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/

Вопрос: как заменить изображение (например, favicon.ico в примере кода ниже) с символом Unicode (например, стрелкой вниз, например ▼ - ▼), используя ТОЛЬКО 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). Основной вопрос моего вопроса заключается в том, как заменить фоновое изображение с символом Юникода, сохраняя остальную часть моего решения 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 вы можете прочитать здесь: Placing Unicode character in CSS content value