selected下拉框样式

样式一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
            /*
            *{ 
            margin: 0; 
            padding: 0; 
            } 
            body { 
            padding: 50px 50px; 
            } */
            .btn-select { 
            position: relative; 
            display: inline-block; 
            width: 150px; 
            height: 25px; 
            background-color: #f80; 
            font: 14px/20px "Microsoft YaHei"; 
            color: #fff; 
            } 
            .btn-select .cur-select { 
            position: absolute; 
            display: block; 
            width: 150px; 
            height: 25px; 
            line-height: 25px; 
            background: #f80 url(ico-arrow.png) no-repeat 125px center; 
            text-indent: 10px; 
            } 
            .btn-select:hover .cur-select { 
            background-color: #f90; 
            } 
            .btn-select select { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 150px; 
            height: 25px; 
            opacity: 0; 
            filter: alpha(opacity: 0;); 
            font: 14px/20px "Microsoft YaHei"; 
            color: #f80; 
            } 
            .btn-select select option { 
            text-indent: 10px; 
            } 
            .btn-select select option:hover { 
            background-color: #f80; 
            color: #fff; 
            }
    </style>
</head>
<body>
    <form> 
        <a class="btn-select" id="btn_select"> 
        <span class="cur-select">请选择</span> 
        <select> 
        <option>选项一</option> 
        <option>选项二</option> 
        <option>选项三</option> 
        <option>选项四</option> 
        <option>选项五</option> 
        </select> 
        </a>
    </form>
    <script type="text/javascript">
        var $$ = function (id) { 
        return document.getElementById(id); 
        } 
        window.onload = function () { 
        var btnSelect = $$("btn_select"); 
        var curSelect = btnSelect.getElementsByTagName("span")[0]; 
        var oSelect = btnSelect.getElementsByTagName("select")[0]; 
        var aOption = btnSelect.getElementsByTagName("option"); 
        oSelect.onchange = function () { 
        var text=oSelect.options[oSelect.selectedIndex].text; 
        curSelect.innerHTML = text; 
        } 
        }
    </script>
</body>
</html>

效果：

**************************************************************************************************************************************************************************************************

样式二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
            /*
            *{ 
            margin: 0; 
            padding: 0; 
            } 
            body { 
            padding: 50px 50px; 
            } */
            .btn-select { 
            position: relative; 
            display: inline-block; 
            width: 150px; 
            height: 25px; 
            background-color: #f80; 
            font: 14px/20px "Microsoft YaHei"; 
            color: #fff; 
            } 
            .btn-select .cur-select { 
            position: absolute; 
            display: block; 
            width: 150px; 
            height: 25px; 
            line-height: 25px; 
            background: #f80 url(ico-arrow.png) no-repeat 125px center; 
            text-indent: 10px; 
            } 
            .btn-select:hover .cur-select { 
            background-color: #f90; 
            } 
            .btn-select select { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 150px; 
            height: 25px; 
            opacity: 0; 
            filter: alpha(opacity: 0;); 
            font: 14px/20px "Microsoft YaHei"; 
            color: #f80; 
            } 
            .btn-select select option { 
            text-indent: 10px; 
            } 
            .btn-select select option:hover { 
            background-color: #f80; 
            color: #fff; 
            }
    </style>
</head>
<body>
    <form> 
        <a class="btn-select" id="btn_select"> 
        <span class="cur-select">请选择</span> 
        <select> 
        <option>选项一</option> 
        <option>选项二</option> 
        <option>选项三</option> 
        <option>选项四</option> 
        <option>选项五</option> 
        </select> 
        </a>
    </form>
    <script type="text/javascript">
        var $$ = function (id) { 
        return document.getElementById(id); 
        } 
        window.onload = function () { 
        var btnSelect = $$("btn_select"); 
        var curSelect = btnSelect.getElementsByTagName("span")[0]; 
        var oSelect = btnSelect.getElementsByTagName("select")[0]; 
        var aOption = btnSelect.getElementsByTagName("option"); 
        oSelect.onchange = function () { 
        var text=oSelect.options[oSelect.selectedIndex].text; 
        curSelect.innerHTML = text; 
        } 
        }
    </script>
</body>
</html>

效果：

参考插件不错的效果，可以访问：http://www.lanrenzhijia.com/others/3047.html

posted @ 2017-07-02 10:18 车车大人阅读(412) 评论(0) 收藏举报

刷新页面返回顶部