HTML中select下拉框默认样式修改

本方法只修改下拉框样式,不修改option样式,修改后的样式:
修改后的样式
思路:
1.先去掉select本身原有的样式。
2.用一个元素(div/lebal等)作为select的父元素。
3.在select父元素后面用:after做一个新的样式。

代码如下:


<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 #94c1e7;
               -moz-border-radius       : 0.2em;
               -webkit-border-radius    : 0.2em;
               border-radius            : 0.2em;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               background               : #ffffff;
               font-family              : SimHei;
               font-size                : 1.1em;
               color                    : RGBA(102,102,102,0.7);
               cursor                   : pointer;
            }

            /*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;
               border                   : 1px solid #94c1e7;
               -moz-border-radius       : 6px;
               -webkit-border-radius    : 6px;
               border-radius            : 6px;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               font-family              : SimHei;
               font-size                : 18pt;
               font-weight              : 500;
               color                    : RGBA(102,102,102,0.7);
               cursor                   : pointer;
               outline                  : none;
            }


            /*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              : #94c1e7;
                color                   : #2984ce;
               -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>去掉select原有样式option>
            <option>Washington DCoption>
            <option>Los Angelesoption>
            <option>Chicagooption>
            <option>Houstonoption>
            <option>Philadelphiaoption>
            <option>Phoenixoption>
        select>
        <br />
        <br />

        <label id="lblSelect">
            <select id="selectPointOfInterest" title="Select points of interest nearby">
                <option>补充新的样式option>
                <option>food beverageoption>
                <option>restaurantoption>
                <option>shoppingoption>
                <option>taxi limooption>
                <option>theatreoption>
                <option>museumoption>
                <option>computersoption>
            select>
        label>
body>
html>

补充(2017-4-28)

还有一种方法是先去除浏览器默认的样式,然后把一个箭头的背景图片定位到右边,这里有代码示例:
http://jsbin.com/gexiwenave/edit?html,css,output,这种方法比较简单。

你可能感兴趣的:(html,select,css,前端开发)