本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！select美化 简单实用不玩花俏的
收藏<!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张 图片：
