php下拉框css样式,简单介绍CSS自定义下拉列表样式的示例代码分享

下拉列表的默认样式：

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

方法一：

用纯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;

}

请选择

北京

上海

广州

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

方法二：

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

HTML代码：

• 请选择
• 北京
• 上海
• 广州

CSS代码：#container{

background:grey;

width:300px;

height:200px;

padding:20px;

}

form p{

width:236px;

height:34px;

}

form p{

font-family:Microsoft YaHei;

background:#FFFFFF;

}

form p: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 p = $("form").find("p");

p.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');

});

});

});