2

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.

Alexander Bell
  • 7,842
  • 3
  • 26
  • 42

1 Answers1

0

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

Community
  • 1
  • 1
Slawa Eremin
  • 5,264
  • 18
  • 28
  • Many thanks for your suggestion. Unfortunately it's not working (you can try it in jsfiddle I have attached and see the effect - it just erases the icon but not adding any character: btw, I have already tried this before on various Unicode characters). Reading the stuff you have mentioned was not of much help: no solution so far. Thanks and regards, – Alexander Bell Mar 24 '15 at 15:37