这个是基于jQ的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery如何自定义select下拉样式</title>
<style>
@charset "utf-8";
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; text-align:center;}
a{ text-decoration:none;}
img{ border:0;}
.main{ width:200px; height:30px; margin:100px auto;}
#cate { float: left;height: 26px;line-height: 26px;text-align: left;width:200px;padding-right:20px;position: relative;}
#cate .cate_wrp {overflow: hidden;}
#cate .cate_inp {padding-left:15px;height: 24px;width: 155px;border-radius: 3px 0 0 3px;border: 1px solid #D4D4D4;border-right:none;background: #fff;float: left;}
#cate a.cate_tri:link, #cate a.cate_tri:visited {width:26px;height:26px;float: left;background: transparent url(images/select_right.gif) no-repeat center center;}
#cate .cate_drop {background:#E2E2E2;width:195px;border:1px solid #ADADAD;border-radius: 2px;}
#cate .cate_drop li {padding-left:15px;width:180px;}
#cate .cate_drop li:hover {background: #E5007F;color: #fff;cursor: pointer;}</style>
<script src="js/jquery.min.js"></script>
</head><body>
<div class="main">
<div id="cate">
<div class="cate_wrp">
<div class="cate_inp cate_tri">默认值</div>
<a href="###" class="cate_tri"></a> </div>
<div class="cate_drop" style="display:none">
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
// 下拉列表js
(function($) {
var $cate = $('#cate'),
$tri = $('.cate_tri', $cate),
$drop = $('div.cate_drop', $cate),
$inp = $('div.cate_inp', $cate); $tri.on('click', function(event) {
var $el = $(this);
if( $el.data('active') !== 'on' ) {
$drop[0].style.display = 'block';
$el.data('active', 'on');
} else {
$drop[0].style.display = 'none';
$el.data('active', 'off')
}
}); $drop.on('mouseover', 'li', function(event) {
$inp[0].innerHTML = this.innerHTML;
}).on('click', 'li', function(event) {
// do something
$drop[0].style.display = 'none';
$tri.data('active', 'off');
});
}(jQuery));
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery如何自定义select下拉样式</title>
<style>
@charset "utf-8";
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; text-align:center;}
a{ text-decoration:none;}
img{ border:0;}
.main{ width:200px; height:30px; margin:100px auto;}
#cate { float: left;height: 26px;line-height: 26px;text-align: left;width:200px;padding-right:20px;position: relative;}
#cate .cate_wrp {overflow: hidden;}
#cate .cate_inp {padding-left:15px;height: 24px;width: 155px;border-radius: 3px 0 0 3px;border: 1px solid #D4D4D4;border-right:none;background: #fff;float: left;}
#cate a.cate_tri:link, #cate a.cate_tri:visited {width:26px;height:26px;float: left;background: transparent url(images/select_right.gif) no-repeat center center;}
#cate .cate_drop {background:#E2E2E2;width:195px;border:1px solid #ADADAD;border-radius: 2px;}
#cate .cate_drop li {padding-left:15px;width:180px;}
#cate .cate_drop li:hover {background: #E5007F;color: #fff;cursor: pointer;}</style>
<script src="js/jquery.min.js"></script>
</head><body>
<div class="main">
<div id="cate">
<div class="cate_wrp">
<div class="cate_inp cate_tri">默认值</div>
<a href="###" class="cate_tri"></a> </div>
<div class="cate_drop" style="display:none">
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
// 下拉列表js
(function($) {
var $cate = $('#cate'),
$tri = $('.cate_tri', $cate),
$drop = $('div.cate_drop', $cate),
$inp = $('div.cate_inp', $cate); $tri.on('click', function(event) {
var $el = $(this);
if( $el.data('active') !== 'on' ) {
$drop[0].style.display = 'block';
$el.data('active', 'on');
} else {
$drop[0].style.display = 'none';
$el.data('active', 'off')
}
}); $drop.on('mouseover', 'li', function(event) {
$inp[0].innerHTML = this.innerHTML;
}).on('click', 'li', function(event) {
// do something
$drop[0].style.display = 'none';
$tri.data('active', 'off');
});
}(jQuery));
</script>
</body>
</html>
解决方案 »
- 图片自适应大小问题
- 急！！关于如何在JavaScript中检测信息不通过阻止页面向服务器回发
- 问个关于如何点击文本框则使radio选中的效果
- jsp判断问题，大虾快来！在线等，急！
- 找一正则表达式：将字符串中 \p000 替换成一个和其相关的路径。
- select 设成多选框，……
- 展开隐蔽
- var userObj =eval('('+xmlHttp.responseText+')'); 报错
- 如何实现div的“alt”属性？
- 怎样取得confirm的返回值,大哥们help......................^^^^^^^^''''''''''
- Uploadify 3.2全部取消队列问题，求助大神
- 兼容性问题
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS仿下拉表单</title>
<style>
.email{width:193px; float:left; margin:3px 0px 0px 30px; position:relative; text-align:left;}
.email .em_num,.em_pwd{height:28px; position:relative;}
.email .em_num .num,.pwd{width:109px; height:22px; line-height:22px; float:left; padding:2px; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; border-right:none; color:#3e3e3e;}
.email .em_num .em_sea{width:69px; height:22px; line-height:22px; background:white url(/Images/tri.gif) no-repeat 96% center; -webkit-text-size-adjust:none; float:left; padding:2px; position:relative; border:1px solid #e5e5e5; color:#3e3e3e;}
.email .em_num .em_sea span{display:none;position:absolute;left:0px;top:22px;z-index:1000;background:#fff}
.email .em_num .em_sea span a{display:block}
.email .em_pwd{margin:5px 0px 0px;}
.email .em_pwd .em_sub{float:left; color:#3e3e3e; border:1px solid #e5e5e5;}
.email .em_pwd .em_sub .sub{width:73px; height:26px; line-height:22px; cursor:pointer; border-width:0px; background: -moz-linear-gradient(center top , rgb(254, 254, 254), rgb(235, 235, 235)) repeat scroll 0% 0% transparent !important; background-color:#f8f8f8;}
</style>
<script>
function showDomain(e, span) {
var o = e.srcElement || e.target;
var label = span.getElementsByTagName('label')[0];
var drop = span.getElementsByTagName('span')[0];
if (o.tagName == 'A') {
drop.style.display = 'none';
label.innerHTML = o.innerHTML;
return false;
}
else drop.style.display = drop.style.display == 'block' ? 'none' : 'block';
}
</script>
</head>
<body>
<div class="email">
<form id="mail" target="_blank" method="post" action="https://reg.163.com/CheckUser.jsp">
<div class="em_num">
<input id="num" class="num" type="text" name="username"></input>
<span class="em_sea cur" onclick="return showDomain(event,this)"><label>@163.com</label><span><a href="#">@163.com</a>
<a href="#">@126.com</a>
<a href="#">@yeah.net</a></span></span>
</div>
<div class="em_pwd">
<input type="hidden" name="url" value="http://fm163.163.com/coremail/fcg/ntesdoor2?lightweight=1&verifycookie=1&language=-1&style=15"></input>
<input id="pwd" class="pwd" type="password" name="password"></input>
<div class="em_sub">
<input class="sub" type="submit" value="登录"></input>
</div>
</div>
</form>
</div>
</body>
</html>