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

来源：互联网发布：直通车数据不显示编辑：程序博客网时间：2024/05/02 23:52

本方法只修改下拉框样式，不修改option样式，修改后的样式：

思路：
1.先去掉select本身原有的样式。
2.用一个元素（div/lebal等）作为select的父元素。
3.在select父元素后面用：after做一个新的样式。

代码如下：

<!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 #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 DC</option>            <option>Los Angeles</option>            <option>Chicago</option>            <option>Houston</option>            <option>Philadelphia</option>            <option>Phoenix</option>        </select>        <br />        <br />        <label id="lblSelect">            <select id="selectPointOfInterest" title="Select points of interest nearby">                <option>补充新的样式</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>

补充（2017-4-28）

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

0 0