CSS select样式优化一个例子

作者：袖梨 2022-06-25

CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到上面的样式，不兼容IE6样式，因为用到了opacity。

代码如下

复制代码

select-area" id="select">

                                请选择您所在的城市

                                    中山市
                                    太原市
                                    广州市
                                请选择区域

                                    石岐区
                                    火炬开发区
                                    西区
                                请选择就医医院

                                    医院名字1
                                    医院名字2
                                    医院名字3
                                请选择挂号科室

                                    科室名字1
                                    科室名字2
                                    科室名字3

预约挂号

CSS样式：

代码如下

复制代码

}
.sel_wrap label{padding-left:10px;font-size:16px;z-index:2; color: #a1a1a1; line-height: 40px; height: 40px; display: block;}
.sel_wrap .select{width:100%; height:40px; line-height:40px; z-index:4;position:absolute;top:0;left:0;margin:0;padding:0;opacity:0; *margin-top:12px; filter:alpha(opacity=0);cursor:pointer; font-size: 16px;}
.dguide-sub .btn{width: 100%; text-align: center; line-height: 64px; font-size: 20px; border: none; }
.dguide-sub .btn-yellow{background: #F06A26; color: #fff;}

JQuery代码：

代码如下	复制代码

效果代码如下

注意：记得加载jquery插件哦

CSS select样式优化一个例子

相关文章

精彩推荐