select样式美化（简单实用）
Posted Chrdai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了select样式美化（简单实用）相关的知识，希望对你有一定的参考价值。
美化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张 图片：
以上是关于select样式美化（简单实用）的主要内容，如果未能解决你的问题，请参考以下文章