Question

我正在寻找应用于HTML <select>元素（即网络表单下拉列表）的样式解决方案，如下所述：

纯HTML5 / CSS3实施
不依赖于Javascript或其他脚本语言
跨浏览器兼容性（FF / Chrome / Safari / IE10）

目前我正在使用以下CSS3代码段来构建<select>元素：

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

示例实施：here

我想了解其他可用的'纯CSS3'样式选项，以应用于HTML <select>元素的内部按钮（带有那个小向下三角形），即背景，颜色，边框，字体属性等。

Answer 1

我在我的一个模块中使用过它。你可以试试这个：

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

调整颜色会为你做[希望]

纯HTML5 / CSS3实施
不依赖于Javascript或其他脚本语言
跨浏览器兼容性（FF / Chrome / Safari / IE10）

Answer 2

到目前为止，两个CSS3解决方案与样式化SELECT元素相关，提供了足够的定制水平和整体美学。以下示例演示了这两种技术;为了简单/可读性，HTML5和CSS3部分封装在一个HTML5文件中。

第一个解决方案实现了下拉按钮上的自定义图像;第二个使用Unicode字符（可以是任何字符）。

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

两种解决方案都基于CSS3伪类的使用。工作示例可用 here 。

注意：Internet Explorer存在一些兼容性问题，但IE将不推荐使用，因此不建议将其用于任何未来的开发。

寻找HTML5 <select>元素CSS3样式解决方案：没有图像文件，跨浏览器兼容</select>

2 个答案: