Click here to Skip to main content
13,199,852 members (65,907 online)
Click here to Skip to main content
Add your own
alternative version

Stats

67.3K views
32 bookmarked
Posted 24 Mar 2015

Advanced CSS3 Styling of HTML5 SELECT Element

, 25 Apr 2015
Rate this:
Please Sign up or sign in to vote.
Pure CSS3 styling solution applicable to HTML5 SELECT element and ASP.NET DropDownList control

Introduction

A pure CSS3 styling solution (no JavaScript) described in the tip is applicable to HTML5 SELECT elements and ASP.NET DropDownList controls. Two sample implementations discussed below allow placing custom image or Unicode character on the top of pulldown button replacing the default downward arrow (single select mode), as shown in the following demo screenshot:

Fig.1: HTML5 SELECT elements w/advanced CSS3 style using custom image and Unicode char, sample screenshot

Click on the image to view the practical implementation of this CSS3 styling technique.

Background

Separation of Programming Concerns

Separation of programming concerns [1] is a software development paradigm of modern days, equally applicable to desktop, mobile/web applications. In adherence to this paradigm and pertinent to web design/development best practices, HTML should be used for page content, CSS for the presentation (styling) and scripting languages (javascript, jQuery, etc) mainly for the app interaction with User. In certain cases these areas may overlap: for example, javascript may be used for styling of the HTML basic elements. This styling technique via javascripting should be considered an exception rather than the rule, a sort of temporary fix. Plus, javascript (or any scripting) could be disabled on the User computer, causing such technique to fail completely. Any forward-looking web design/development should adhere to the maximum possible extent to the fundamental concept of the separation of programming concerns. In simple words, styling must be done by CSS; javascripting should be used for the interaction and behavioral logic.

HTML5 SELECT element styling

Styling of SELECT HTML element and corresponding ASP.NET DropDownList control (rendered as aforementioned HTML SELECT) is quite important and, still, a non-trivial task. The main goal of this tip is to provide a pure CSS solution with balanced complexity, flexibility and aesthetics while preserving all functionality of the underlying Select element (in other words, to create a sort of "drop-in" replacement for the existing web page design that uses SELECT elements).

Using the Code

The listing below includes both HTML5 and CSS3 encapsulated in a single .htm file. It demonstrates two sample CSS3 styling techniques: the first one using custom image identified in background URL (in this sample, it points to the favicon.ico of webinfocentral.com; in actual project, it could be any image file accessible by url property) and a second one using Unicode character (\25bc in label#lblSelect::after pseudo-element, which also displays a downward arrow with all CSS3 customization possible) on the top of pull-down button. The solution is also applicable to ASP.NET DropDownList control asp:DropDownList (use either id property or CssClass).

The following sample code snippet in Listing 1 demonstrates CSS3 styling technique allowing any Unicode character to be placed on pull-down button, plus other aesthetic enhancements.

HTML5 Select element with Unicode Character

Listing 1. Advanced CSS: HTML5 Select element with Unicode char on pull-down button
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ADVANCED CSS3 | SELECT ELEMENT WITH UNICODE BUTTON SYMBOL</title>
        <meta name="Description" content="Drop-down control with Unicode symbol placed on pull-button and other CSS3 styling technique" />

        <style type="text/css">
            /*SELECT ELEMENT WITH UNICODE SYMBOL: DOWN-ARROW (&#x25bc;)*/
            select#selectPointOfInterest
            {
               width                    : 185pt;
               height                   : 40pt;
               line-height              : 40pt;
               padding-right            : 20pt;
               text-indent              : 4pt;
               text-align               : left;
               vertical-align           : middle;
               box-shadow               : inset 0 0 3px #606060;
               border                   : 1px solid #acacac;
               -moz-border-radius       : 6px;
               -webkit-border-radius    : 6px;
               border-radius            : 6px;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;  /*IMPORTANT*/
               font-family              : Arial,  Calibri, Tahoma, Verdana;
               font-size                : 18pt;
               font-weight              : 500;
               color                    : #000099;
               cursor                   : pointer;
               outline                  : none;
            }
            select#selectPointOfInterest::-ms-expand {display: none;} /*FOR IE*/
            select#selectPointOfInterest option
            {
                padding             : 4px 10px 4px 10px;
                font-size           : 11pt;
                font-weight         : normal;
            }
            select#selectPointOfInterest option[selected]{ font-weight:bold}
            select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; }
            select#selectPointOfInterest:hover {font-weight: 700;}
            select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}

            /*LABEL FOR SELECT*/
            label#lblSelect{ position: relative; display: inline-block;}
            /*DOWNWARD ARROW (25bc)*/
            label#lblSelect::after
            {
                content                 : "\25bc";
                position                : absolute;
                top                     : 0;
                right                   : 0;
                bottom                  : 0;
                width                   : 20pt;
                line-height             : 40pt;
                vertical-align          : middle;
                text-align              : center;
                background              : #000099;
                color                   : #fefefe;
               -moz-border-radius       : 0 6px 6px 0;
               -webkit-border-radius    : 0 6px 6px 0;
                border-radius           : 0 6px 6px 0;
                pointer-events          : none;
            }
        </style>
    </head>

    <body>
        <br />
        <label id="lblSelect">
            <select id="selectPointOfInterest" title="Select points of interest nearby">
                <option>caffe</option>
                <option>food beverage</option>
                <option>restaurant</option>
                <option>shopping</option>
                <option>taxi limo</option>
                <option>theatre</option>
                <option>museum</option>
                <option>computers</option>
            </select>
        </label>
</body>
</html>

The following sample code snippet shown in Listing 2 demonstrates CSS3 styling technique used to place the image icon on pull-down button, plus other aesthetic enhancements.

HTML5 Select element with Image button

Listing 2. Advanced CSS: HTML5 Select element with image button
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ADVANCED CSS3 | SELECT ELEMENT WITH IMAGE BUTTON</title>
        <meta name="Description" content="Drop-down control with image placed on pull-button and other CSS3 styling technique" />
        
        <style type="text/css">
            /* SELECT ELEMENT WITH GRAPHIC IMAGE */
            select#selectTravelCity
            {
               width                    : 14em;
               height                   : 3.2em;
               padding                  : 0.2em 0.4em 0.2em 0.4em;
               vertical-align           : middle;
               border                   : 1px solid #e9e9e9;
               -moz-border-radius       : 0.2em;
               -webkit-border-radius    : 0.2em;
               border-radius            : 0.2em;
               box-shadow               : inset 0 0 3px #a0a0a0;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;  /*IMPORTANT*/

               /* sample ICO image at webinfocentral.com */
               background               : url(http://webinfocentral.com/Images/favicon.ico) 95% / 10% no-repeat #fdfdfd;
               font-family              : Arial,  Calibri, Tahoma, Verdana;
               font-size                : 1.1em;
               color                    : #000099;
               cursor                   : pointer;
            }
            select#select#selectTravelCity::-ms-expand {display: none;} /*FOR IE*/
            select#selectTravelCity  option
            {
                font-size               : 1em;
                padding                 : 0.2em 0.4em 0.2em 0.4em;
            }
            select#selectTravelCity  option[selected]{ font-weight:bold}
            select#selectTravelCity  option:nth-child(even) { background-color:#f5f5f5; }
            select#selectTravelCity:hover
            {
                color                   : #101010;
                border                  : 1px solid #cdcdcd;
            }    
            select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;}
        </style>
    </head>

    <body>
        <br />
        <select id="selectTravelCity" title="Select Travel Destination">
            <option>New York City</option>
            <option>Washington DC</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
            <option>Houston</option>
            <option>Philadelphia</option>
            <option>Phoenix</option>
            <option>San Antonio</option>
            <option>San Diego</option>
            <option>Dallas</option>
            <option>San Jose</option>
            <option>Austin</option>
        </select>
</body>
</html>

Points of Interest

CSS3 pseudo-class ::after and pseudo-element :after

In a context of this particular CSS3 solution, pseudo element label#lblSelect::after and pseudo-class label#lblSelect:after can be used interchangebly.

Browser compatibility

Unicode characters [4] are not universally recognized by different web browsers. For example, Opera/Safari/Chrome all do recognize Unicode characters &#x21bb; and &#x21ba; (could be used as a 'Refresh' icon), but do not recognize rather similar gapped circle arrows &#x27f3;(U+27F3) and &#x27f2; (U+27F2) characters; same goes to Unicode character U+2615 ('Hot Beverage') - it's not recognized by IE/webkit-based browsers (alternatively, instead of 'Hot Beverage' glyph you can use U+1F375 ('Teacup Without Handle'), which is rendered properly in all major browsers except for Opera). As a general rule, it's highly recommended to test a Unicode solution in all web browsers of interest pertinent to the particular use-cases.

Also, notice the appearance:none; property which is essential for this solution to work properly. This property de facto is supported by all major web browsers except for IE (see the reference [2] mentioned in comments thread for more info). The latest IE11 version is mostly compatible with the solution: see the fix in'Fix and Improvements' sub-chapter (also, regarding the use of IE in any forward-looking web apps: most likely IE will be either discarded sometime soon [4], or will emerge under different branding [5], hopefully made compatible with advanced HTML5/CSS3 like other major browsers). The actual usage share of IE is relatively small and continuously shrinking: based on [3] the Google Chrome/Android browsers are taking the lion share of roughly 50%, another 12% allocated for Firefox, 14% for Safari and 4% for Opera (all mostly compatible with the solution); the IE share is estimated as 13%. Following sample screenshots reflect the test results of the actual solution running in various web browsers.

Test settings and results

Partial testing was conducted in the following web browsers:

  • Firefox v.37+
  • Chrome v.42+
  • Opera v.28+
  • Safari v.5+ (for Win)
  • IE11

Sample screenshots follow (click on the image to see the fully operational HTML5/CSS3 Select control running in actual web apps in a single select mode).

Firefox v.37+

 

Chrome v.42+

 

Opera v.28

 

IE11 (before fix)

IE11 (after fix applied)

Fig 2a. Select element with Unicode char on pull-down button

 

Firefox v.37+

 

Chrome v.42

 

Opera v.28

 
IE11 (before fix)
IE11 (after fix applied)
Fig 2b. Select element with Image button

Use cases

Pertinent to mobile and real-time web apps critical of Internet traffic, the Unicode CSS3 styling of SELECT element described in Listing 1 would be considered a preferred solution. It does not requre any graphic image files: the glyph on pull-down button contains just a single character Unicode character (i.e. '\25bc' in aforementioned example; also useful is white down-pointing triangle U+25BD and down arrowhead U+2304), which is easy to change as demonstrated in the following sub-chapter. In case of no any applicable Unicode character found, the second solution (Listing 2) using graphic image files can be handy, though it could increase the web traffic due to relatively larger size of graphic image files.

More Examples

More CSS3 styling examples using various Unicode charactes [6] on SELECT pull-down button are listed below. Also, the code snippet in Listing 3 utilizes 'em' relative units (instead of 'pt' as shown in previous examples).

Listing 3. Various Unicode Characters on pull-down button of SELECT element
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ADVANCED CSS3 | SELECT ELEMENT WITH UNICODE CHAR ON PULL-BUTTON SYMBOL</title>
        <meta name="Description" content="Drop-down control with various Unicode symbols placed on pull-button and other CSS3 styling technique using 'em' unit" />

        <style type="text/css">
            select
            {
               width                    : 12em;
               height                   : 3em;
               line-height              : 3em;
               vertical-align           : middle;
               padding-right            : 2.5em;
               text-indent              : 0.2em;
               text-align               : left;
               box-shadow               : inset 0 0 3px #606060;
               border                   : 1px solid #acacac;
               -moz-border-radius       : 6px;
               -webkit-border-radius    : 6px;
               border-radius            : 6px;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;  /*IMPORTANT*/
               font-family              : Arial,  Calibri, Tahoma, Verdana;
               font-size                : 1.5em;
               font-weight              : 500;
               color                    : #000099;
               cursor                   : pointer;
               outline                  : none;
            }
            select::-ms-expand {display: none;} /*FOR IE*/
            select option
            {
                padding             : 0.3em;
                font-size           : 1em;
                font-weight         : normal;
            }
            select option[selected]{ font-weight:bold}
            select option:nth-child(even) { background-color:#f5f5f5; }
            select:hover {font-weight: 700;}
            select:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}

            /*LABEL FOR SELECT*/
            label { position: relative; display: inline-block;}
            label::after
            {
                /*'AIRPLANE' GLYPGH on PULL-DOWN BUTTON (U+2708)*/
                content                 : "\2708";
                position                : absolute;
                top                     : 0;
                right                   : 0;
                bottom                  : 0;
                width                   : 2.5em;
                line-height             : 3em;
                vertical-align          : middle;
                text-align              : center;
                background              : #000099;
                color                   : #fefefe;
                font-size               : 1.5em;
                font-weight             : 500;
               -moz-border-radius       : 0 6px 6px 0;
               -webkit-border-radius    : 0 6px 6px 0;
                border-radius           : 0 6px 6px 0;
                pointer-events          : none;
            }

            /*'ENVELOPE' GLYPGH on PULL-DOWN BUTTON (U+2709)*/
            #envelope label::after  { content: "\2709"; }

            /*'SINGLE BAR NOTE' GLYPH ON PULL-DOWN BUTTON (U+266B)*/
            #music label::after  { content: "\266b"; }

        </style>
    </head>

    <body>
        <br />
        <div>
            <label>
                <select title="TICKETS">
                    <option>New York City</option>
                    <option>Washington DC</option>
                    <option selected>Los Angeles</option>
                    <option>Chicago</option>
                    <option>Houston</option>
                    <option>Philadelphia</option>
                </select>
            </label> (U+2708)
        </div>
        <br />

        <div id="envelope">
            <label>
                <select title="MAILING OPTIONS">
                    <option>USPS</option>
                    <option selected>UPS</option>
                    <option>FedEx</option>
                    <option>DHL</option>
                 </select>
            </label> (U+2709)
        </div>
        <br />

        <div id="music">
            <label>
                <select title="MUSIC">
                    <option>classical</option>
                    <option selected>rock/pop</option>
                    <option>jazz</option>
                    <option>country/folk</option>
                </select>
            </label> (U+266B)
        </div>
    </body>
</html>

Corresponding to the Listing above, sample screenshot follows:

Fig 3: Sample screenshot of SELECT elements with various Unicode chars

Flexibility

In order to change the glyph placed on pull-down button, just encapsulate the select element in the <div>, for example <div id="envelope"> and add the corresponding line to the CSS stylesheet: 

<code>#envelope label::after  { content: "\2709"; }</code>

as shown in the examples (Listing 3).

Fixes and improvements

IE compatibility fix: as suggested by our fellow CPian Joe-Gakenheimer (jgakenhe), the following line added to CSS stylesheet will partially fix IE-compatibility issue, making the pull-down button look normally (kudos to jgakenhe):

select::-ms-expand {display: none;}
Other considerations for IE Users

Regarding the versions prior to IE11, you probably have seen the meta statement like the following:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

It may be helpful in certain cases: you can find more info on this topic in MSDN article [7,8].

Other examples of HTML5/CSS3 advanced technique

There are examples of advanced CSS3 pseudo-class use-cases: ToggleButton on the top of CheckBox element [9], and an example of using <div> elements in order to create compact and flexible pseudo-graphics [10].

History

  • March 24, 2015: Original version published
  • April 23, 2015: Extended version published with major code/graphic and textual updates.
  • April 25, 2015: IE fix discussed/applied
  • April 25, 2015: More samples added with various Unicode characters used as button glyphs

References

  1. Separation of concerns
  2. CSS Appearance property
  3. Usage share of web browsers
  4. Microsoft is killing off the Internet Explorer brand (theverge.com)
  5. Project Spartan (Microsoft)
  6. UTF-8 Miscellaneous Symbols
  7. How Internet Explorer Chooses Between Document Modes (MSDN)
  8. Document Modes (MSDN)
  9. Toggle Button built on ASP.NET CheckBox and HTML5/CSS
  10. Advanced CSS3: Pseudo-icons Made of div Elements

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. Alexander Bell is a seasoned full-stack Software Engineer (Win/Web/Mobile). He holds PhD in EE/IT, authored 37 inventions and published 300+ technical articles. Currently focused on HTML5/CSS3, Javascript, .NET/WPF/C#, Angular.js, SQL, 'Big Data', Machine Learning, AI, IoT. Alex participated in App Innovation Contests (AIC 2102/2013) with multiple winning submissions. Portfolio samples:

  1. Real-time NY Bus Tracking Web App (IoT)
  2. Integrated Sensors Hub (IMU) Testing Web Page
  3. Semaphon™ semantic phone num-to-text converter
  4. Educational Web Portal
  5. Free Online NY Payroll Tax Calculator
  6. WebTV powered by YouTube Player powered by .NET API (#1 on Google)
  7. Top-50 Digital Cameras (by iMark-DCAM rating engine)
  8. Engineering Calculator VOLTA
  9. Big Data: Facebook and YouTube
  10. NY City Trivia Quiz
  11. NY Photo Gallery
  12. Publications by A. Bell

You may also be interested in...

Comments and Discussions

 
GeneralHTML5 and CSS3 Styling Pin
Member 1152775127-Apr-15 19:17
memberMember 1152775127-Apr-15 19:17 
GeneralRe: HTML5 and CSS3 Styling Pin
DrABELL1-May-15 13:56
professionalDrABELL1-May-15 13:56 
QuestionWhat font family will show \2615? Pin
Alexms27-Apr-15 10:22
memberAlexms27-Apr-15 10:22 
AnswerRe: What font family will show \2615? Pin
DrABELL27-Apr-15 11:18
professionalDrABELL27-Apr-15 11:18 
GeneralRe: What font family will show \2615? Pin
Alexms27-Apr-15 12:15
memberAlexms27-Apr-15 12:15 
GeneralRe: What font family will show \2615? Pin
DrABELL27-Apr-15 15:02
professionalDrABELL27-Apr-15 15:02 
GeneralMy vote of 5 Pin
Camilo Reyes25-Apr-15 5:03
professionalCamilo Reyes25-Apr-15 5:03 
GeneralRe: My vote of 5 Pin
DrABELL25-Apr-15 5:14
professionalDrABELL25-Apr-15 5:14 
QuestionNice try... Pin
Dewey24-Apr-15 7:49
memberDewey24-Apr-15 7:49 
AnswerRe: Nice try... Pin
DrABELL24-Apr-15 10:11
professionalDrABELL24-Apr-15 10:11 
GeneralRe: Nice try... Pin
Dewey24-Apr-15 23:19
memberDewey24-Apr-15 23:19 
GeneralRe: Nice try... Pin
DrABELL25-Apr-15 2:18
professionalDrABELL25-Apr-15 2:18 
GeneralRe: Nice try... Pin
Dewey25-Apr-15 18:51
memberDewey25-Apr-15 18:51 
GeneralRe: Nice try... Pin
DrABELL26-Apr-15 1:55
professionalDrABELL26-Apr-15 1:55 
AnswerRe: Nice try... Pin
jgakenhe25-Apr-15 13:04
memberjgakenhe25-Apr-15 13:04 
GeneralRe: Nice try... Pin
Dewey25-Apr-15 18:49
memberDewey25-Apr-15 18:49 
GeneralRe: Nice try... Pin
DrABELL26-Apr-15 2:02
professionalDrABELL26-Apr-15 2:02 
GeneralRe: Nice try... Pin
DrABELL26-Apr-15 2:11
professionalDrABELL26-Apr-15 2:11 
QuestionHere's a Partial Fix Pin
jgakenhe23-Apr-15 9:04
memberjgakenhe23-Apr-15 9:04 
AnswerRe: Here's a Partial Fix Pin
DrABELL23-Apr-15 9:14
professionalDrABELL23-Apr-15 9:14 
GeneralRe: Here's a Partial Fix Pin
jgakenhe23-Apr-15 9:36
memberjgakenhe23-Apr-15 9:36 
GeneralRe: Here's a Partial Fix Pin
DrABELL23-Apr-15 10:00
professionalDrABELL23-Apr-15 10:00 
GeneralRe: Here's a Partial Fix Pin
Dewey24-Apr-15 7:17
memberDewey24-Apr-15 7:17 
GeneralRe: Here's a Partial Fix Pin
DrABELL24-Apr-15 9:14
professionalDrABELL24-Apr-15 9:14 
GeneralRe: Here's a Partial Fix Pin
Dewey24-Apr-15 23:24
memberDewey24-Apr-15 23:24 
QuestionIE Pin
Member 1051563626-Mar-15 4:01
memberMember 1051563626-Mar-15 4:01 
AnswerRe: IE Pin
DrABELL26-Mar-15 4:18
professionalDrABELL26-Mar-15 4:18 
GeneralRe: Appearance attribute is not a Supported CSS attribute Pin
John B Oliver19-Apr-15 12:07
memberJohn B Oliver19-Apr-15 12:07 
QuestionNice thanks for posting this.... Pin
Mr. Javaman24-Mar-15 14:37
memberMr. Javaman24-Mar-15 14:37 
AnswerRe: Nice thanks for posting this.... Pin
DrABELL25-Mar-15 5:21
professionalDrABELL25-Mar-15 5:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 25 Apr 2015
Article Copyright 2015 by DrABELL
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid