Looking for HTML5 <select> element CSS3 styl

2019-07-19 06:15发布

站内问答 / CSS3
643 2 6

I am looking for styling solution to apply to HTML <select> element (i.e. web form drop-down) as described below:

  1. Pure HTML5/CSS3 implementation
  2. No any reliance on Javascript or other scripting languages
  3. Cross-browsers compatibility (FF/Chrome/Safari/IE10)

Currently I'm using the following CSS3 snippet for styling <select> element:

select {
    font-size:9pt;
    letter-spacing:0.07em;
    color:#808080;
    background:transparent;
    border: solid 1px #808080;
    padding:3px;
    cursor:pointer;
}
select option { padding: 1px 5px 1px 3px;}
select option[selected]{ color:#303030; }
select option:nth-child(even) { background-color:#e5e5e5; }

Sample implementation: here

I would like to find out about other available 'pure CSS3' styling options to apply to the inner button (with that little downward triangle) of HTML <select> element, i.e., its background, color, border, font properties, etc.

2条回答
Viruses.
2楼-- · 2019-07-19 06:58

i had used this in one of my modules. You can try this :

select {
   background-color:#91EB76;
   width: 180px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
}

Adjusting colors will do the work for you [hopefully]

  • Pure HTML5/CSS3 implementation
  • No any reliance on Javascript or other scripting languages
  • Cross-browsers compatibility (FF/Chrome/Safari/IE10)
查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-07-19 07:01

So far, two CSS3 solutions exist pertinent to styling SELECT element, providing adequate level of customization and overall aesthetics. The following sample demonstrates both techniques; for the sake of simplicity/readability HTML5 and CSS3 parts are encapsulated in a single HTML5 file.

The first solution implements custom image placed on the pull-down button; the second one utilizes Unicode characters (can be any).

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

Both solutions are based on the use of CSS3 pseudo-classes. Working example is available here.

Note: there is some compatibility issue with Internet Explorer, but IE is going to be deprecated, thus it should not be recommended for any future dev.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)