Select-or-Die演示11种美化下拉框select方法

在线预览

下载地址

在线实例
 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<div class="main">             <div class="mianc">                 <h1>默认</h1>                   <!-- Demo start -->                 <div class="select">                     <select class="myselect">                         <option value="交互设计">交互设计</option>                         <option value="视觉设计">视觉设计</option>                         <optgroup label="开发">                             <option value="前端开发">前端开发</option>                             <option value="后端开发">后端开发</option>                         </optgroup>                         <option value="用户研究">用户研究</option>                         <option value="产品经理">产品经理</option>                     </select>                 </div>                 <!-- Demo end -->             </div>         </div>         <style>             * { margin: 0; padding: 0;}             html, body { height: 100%; overflow: hidden;}             body { font-family: Consolas,arial,"宋体";}             .menu { position: absolute; left: 0; top: 0; width: 200px; height: 100%; #ccc; font-family: Consolas,arial,"宋体";}             .menuc { height: 100%; overflow-x: hidden; overflow-y: auto;}             .menu span { display: block; height: 100px;}             .menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}             .menu a:hover { #eee;}             .menu .cur { color: #000; }             .main { height: 100%; margin-left: 200px;}             .mianc { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto;}             .main h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei";}             .explain, .sucaihuo-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}         </style>   转载：http://www.cnblogs.com/niuboren/p/6108170.html