select样式美化（简单实用）

最新推荐文章于 2024-05-24 13:19:01 发布

weixin_30455365

最新推荐文章于 2024-05-24 13:19:01 发布

阅读量578

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chrdai/p/6163899.html

版权

美化select，可以实用一个a标签将select嵌套进去，然后将<a>相对定位，在将select绝对定位，美化<a>即可

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <style>
        .sel_mask{                    /*将<a></a>相对定位*/
            position:relative;
            width:200px;
            height:25px;
            background:#24A0D8;
            border-radius: 5px;
            box-shadow:1px 1px 5px #169BD5;
            display:inline-block;
            text-decoration: none;
        }
        .sel_mask:hover{         /*添加hover效果*/
            background:#169BD5;
        }
        .sel_mask select{        /*以相同大小将<select></select>绝对定位*/
            top:0px;
            left:0px;
            position:absolute;
            width:200px;
            height:25px;
            opacity:0;
        }
        .sel_mask select option[selected]{
            font-weight:bold
        }
        .sel_mask select option:nth-child(even) {
            background-color:#A7DAEF;
        }
        .sel_mask select option{
            color:#EA5400;
        }
        .sel_mask span{     /*显示内容*/
            position: absolute;
            top:3px;
            left:5px;
            right: 20px;
            display: inline-block;
            color:#fff;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
        }
        .sel_mask img{          /*箭头图标*/
            display: inline-block;
            position: absolute;
            top:2px;
            right: 5px;
        }
    </style>
</head>
<body>
<a href="javascript:void(0)"  class="sel_mask"><span>请选择</span><img src="arrow_down.png"/>
    <select  class="sel">
        <option>请选择</option>
        <option>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
        <option>选项四</option>
        <option>选项五</option>
        <option>选项六</option>
        <option>选项七</option>
    </select>
</a>
<script>
$(function () {
    $('.sel').change(function () {    // 选择后替换内容并恢复箭头方向
        $('span').html($('.sel').find('option:selected').html());
        $('.sel_mask').find('img').attr('src','arrow_down.png');
    })
    $('.sel').blur(function () {      //什么也不选恢复箭头方向
        $('.sel_mask').find('img').attr('src','arrow_down.png');
    })
    $('.sel').click(function(){     // 点击后更改箭头方向
        $('.sel_mask').find('img').attr('src','arrow_up.png');
    })
})
</script>
</body>
</html>

以下附2张图片：

转载于:https://www.cnblogs.com/chrdai/p/6163899.html

weixin_30455365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select样式美化（简单实用）

美化select，可以实用一个a标签将select嵌套进去，然后将<a>相对定位，在将select绝对定位，美化<a>即可<!DOCTYPE><html><head> <script type="text/javascript" src="jquery.js"></script> ...
复制链接

扫一扫