浅谈CSS自定义下拉列表的样式

来源：互联网发布：淘宝店铺id在哪里看编辑：程序博客网时间：2024/04/29 06:51

下拉列表的默认样式：

下面介绍自定义下拉列表的两种方法：

方法一：

用纯CSS自定义下拉列表的样式。

原理：将默认的下拉列表样式清除，自定义样式，并附上一张向右对齐的小箭头图片。

<!doctype html><html><head><style type="text/css">select{width:200px;height:30px;appearance:none;    -moz-appearance:none;    -webkit-appearance:none;background: url("images/select.png") no-repeat right center;font-size:16px;font-family:Microsoft YaHei;color:red;}</style></head><body><form action="" method="post"><select><option value="请选择">请选择</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select></form></body></html>

问题：修改option的宽和高无效。

方法二：

用div+ul+jQuery实现自定义样式的下拉列表select。

HTML代码：

<div id="container"><form action="" method="post"><div><ul><li class="active">请选择</li><li>北京</li><li>上海</li><li>广州</li></ul></div></form></div>

CSS代码：

#container{background:grey;width:300px;height:200px;padding:20px;}form div{    width:236px;    height:34px;}form div{font-family:Microsoft YaHei;    background:#FFFFFF;}form div:hover{    border:1px solid #E74F4D;}form ul{margin:0;padding:0;}form ul li:first-child{    height:34px;    line-height:34px;}form ul li{    width:236px;    height:24px;    line-height:24px;    font-size:15px;    color:#323333;    opacity:0.7;    background:#e3e3e5;    text-indent:12px;display:none;}form ul li.active{    display:block;    background:url("images/arrows_active_down.gif") no-repeat scroll right center;    opacity:1;}form ul li:not(.active):hover{    background:#E74F4D;    color:white;}

jQuery代码：

$(document).ready(function(){    var div = $("form").find("div");    div.mouseover(function(e) {        var event = e || window.event;        var target = event.target || event.srcElement;        var _this = $(this);        if(target.nodeName.toLowerCase() == 'li') {            _this.find('li').css('display', 'block');            _this.find('li').click(function(){                var li = $(this);                _this.find('.active').text(li.text());            });        }        _this.mouseout(function(e) {            var event = e || window.event;            var target = event.target || event.srcElement;            if(target.nodeName.toLowerCase() == 'li')_this.find('li').not('.active').css('display','none');        });    });});

1 0