利用CSS实现酷炫的下拉框特效

1. <div class="container">       <div class="heading">  
2.         <h2>Custom Select</h2>       </div>  
3.        <div class="select">  
4.         <p>Please select</p>           <ul>  
5.             <li data-value="HTML5">HTML5</li>               <li data-value="CSS3">CSS3</li>  
6.             <li data-value="JavaScript">JavaScript</li>               <li data-value="JQuery">JQuery</li>  
7.             <li data-value="Backbone">Backbone</li>           </ul>  
8.     </div>   </div>  

可见，我们并没有利用原生的 select 元素，而是利用其它元素来模拟这个效果。我们为 li 元素指定了 data-value,主要是接下来我们会用 JQuery 获取选中值并将其放置到 p 元素下。

下面逐步来看 CSS 代码。