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
通往牛逼的路上,在意的只有远方!