修改下拉列表的默认css样式

使用原生css效果,实现一个网站主页常见的下拉菜单效果:


1、HTML页面布局

html实现如下:



默认样式是这样的:


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部分:

  

3、最终效果图

表现出这样的样子:

修改下拉列表的默认css样式_第1张图片

你可能感兴趣的:(HTML/CSS)