介绍请看 http://www.codeproject.com/Tips/890021/Advanced-CSS-styling-of-HTML-SELECT-Element

25063734_c9BB.jpg

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>

        <style type="text/css">

 

            /* SELECT W/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;

               /* sample p_w_picpath from the 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#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;}

 

            /*SELECT W/DOWN-ARROW*/

            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;

               font-family              : Arial,  Calibri, Tahoma, Verdana;

               font-size                : 18pt;

               font-weight              : 500;

               color                    : #000099;

               cursor                   : pointer;

               outline                  : none;

            }

            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 />

        <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>

        <br />

        <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>