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

首先来看看要实现的效果图

想要制作这么一个效果还是比较麻烦的，但是代码并不难理解。

首先，来看看 Html 代码。

XML/HTML Code复制内容到剪贴板

<div class="container">  
    <div class="heading">  
        <h2>Custom Select</h2>  
    </div>  
  
    <div class="select">  
        <p>Please select</p>  
        <ul>  
            <li data-value="HTML5">HTML5</li>  
            <li data-value="CSS3">CSS3</li>  
            <li data-value="JavaScript">JavaScript</li>  
            <li data-value="JQuery">JQuery</li>  
            <li data-value="Backbone">Backbone</li>  
        </ul>  
    </div>  
</div>  

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

下面逐步来看 CSS 代码。

CSS Code复制内容到剪贴板

* {   
    margin: 0;   
    padding: 0;   
}   
  
html {   
    font-family: ‘Terminal’;   
    font-size: 62.5%;   
}   
  
body {   
    background-color: #33CC66;   
}  

1、将网页中所有元素的外边距和内边距设置为 0。

2、将网页中的默认字体设置为 Terminal，字体大小设置为 62.5%, 也就是 10px。

3、设置背景颜色为 #33CC66。

XML/HTML Code复制内容到剪贴板

<link href=’http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis’ rel=’stylesheet’ type=’text/css’>