使用原生css效果,实现一个网站主页常见的下拉菜单效果:
1、HTML页面布局
html实现如下:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
默认样式是这样的:
2、CSS样式效果
加入CSS样式
需要注意的几点:
1、border:solid 5px #FFF;这是一个白色的5像素的边框,因为网页背景色默认是白色,这就会使select这个元素看上去好像比外面的form元素小。
2、appearance属性 使 div 元素看上去像一个按钮,默认是normal,设置成none就会不显示出默认小箭头。其中-moz和-webkit分别给火狐和谷歌浏览器单独下命令。
3、用来显示出大白色箭头的arrow.png自己在Photoshop里画一个就可以了,要注意的是IE6更早的不支持png24 。
(↓↓↓下图因为是白色箭头图所以看不见了)
↑↑↑这里真的有个图,嗯。。
下面是CSS部分:
<style><span style="white-space:pre"> </span>form{background:#FE4C40;}
select{
border: solid 5px #FFF;
appearance:none;
-moz-appearance:none; /*for firefox*/
-webkit-appearance:none; /*for chrome*/
padding-right: 10px;
color:#FFF;
font-size: 30px;
width: 200px;
height: 50px;
overflow: hidden;
background: url(arrow.png) no-repeat right #FF9900;
}
option{ color:#FFF;}
</style>
3、最终效果图
表现出这样的样子: