自定义select样式

  • <!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">

  • <head>

  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • <title>Select自定义Select自伸展宽度</title>

  • <style type="text/css">

  • body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}

  • .uboxstyle .select_box{width:120px;height:24px;}

  • .uboxstyle div.tag_select,.uboxstyle div.tag_select_hover,.uboxstyle div.tag_select_open,.uboxstyle div.tag_select b,.uboxstyle div.tag_select_hover b,.uboxstyle div.tag_select_open b{background: url(http://i1173.photobucket.com/albums/r595/charrysong/upload/ubox-select.gif) no-repeat;}

  • .uboxstyle div.tag_select,.uboxstyle div.tag_select_hover,.uboxstyle div.tag_select_open,.uboxstyle ul.tag_options li{height:24px;line-height:24px;cursor:pointer;outline: none;padding-left:10px;display:block;color:#79A2BD;width:100px;}

  • .uboxstyle div.tag_select{background-position:0 0;}

  • .uboxstyle div.tag_select_hover{background-position: 0 -24px;}

  • .uboxstyle div.tag_select_open{background-position: 0 -48px;}

  • .uboxstyle div.tag_select b,.uboxstyle div.tag_select_hover b,.uboxstyle div.tag_select_open b{display:block;padding-right:10px;}

  • .uboxstyle div.tag_select b{background-position:right 0}

  • .uboxstyle div.tag_select_hover b{background-position:right -24px;}

  • .uboxstyle div.tag_select_open b{background-position:right -48px;}

  • .uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;width:120px;margin:0;border:2px solid #6d93ab;border-top:none;background:#fff;}

  • .uboxstyle ul.tag_options li{text-decoration:none;}

  • .uboxstyle ul.tag_options li.open_hover{background:#6d93ab;color:#fff}

  • .uboxstyle ul.tag_options li.open_selected{color:#f60}

  • </style>

  • <script type="text/javascript" src="http://www.ok22.org/download/select2css.js"></script>

  • </head>

  • <body>

  • <div class="uboxstyle"><!--包含select的style-->

  • <h3 style="color:#6D93AB;font-size:14px;">自定义下拉框自伸展宽度</h3>

  • <select name="language" id="language">

  • <option value="English" selected="selected">EnglishEnglishEnglish</option>

  • <option value="简体中文" >简体中aaaaa文</option>

  • <option value="日本語" >日本語</option>

  • <option value="Deutsch" >Deutsch</option>

  • <option value="Espa?ol" >Espa?ol</option>

  • <option value="Fran?ais" >Fran?ais</option>

  • <option value="Italiano" >Italiano</option>

  • <option value="Polski" >Polski</option>

  • <option value="Português" >Português</option>

  • <option value="Svenska" >Svenska</option>

  • <option value="Türk?e" >Türk?e</option>

  • <option value="Руccкий" >Руccкий</option>

  • </select>

  • <select name="language2" id="language2">

  • <option value="English" selected="selected">EnglishEnglishEnglish</option>

  • <option value="简体中文" >简体中简体中简体中简体中简体中简体中简体中</option>

  • <option value="日本語" >日本語</option>

  • </select>

  • </div>

  • <div class="">你好啊</div>

  • </body>

  • </html>

  • 如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=402【select 自伸展宽度】幸凡学习网
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值