<!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 type="text/css" bogus="1">
body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;}
/*下拉列表select的commonselect样式 配合jquery.select插件 */
/* select style */
.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;}
.dropdown * {-moz-user-select:none;}
.dropselectbox{float:left; position:absolute}
.overclass{ z-index:999} /* 对于IE下层定位问题的修正样式 */
.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;}
.dropdown h4.over{border-color:#369;}
.dropdown h4.current{border-color:#003;}
.dropdown div {display:none;position:absolute; left:0px; top:0px;}
.dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;}
.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}
.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;}
.dropdown ul li.over{background:#369; color:#FFF;}
/* select style */
/* input style */
input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;}
</style>
<script type="text/javascript" src="https://www.jb51.net/jquery132.js" src="https://www.jb51.net/jquery132.js"></script>
<script type="text/javascript" src="https://www.jb51.net/jquery.select.js" src="https://www.jb51.net/jquery.select.js"></script>
</head>
<body>
<h1>Jquery Select(单选) 模拟插件 V1.3.4</h1>
<form action="#" method="post">
类型：
<select>
<option value=""></option>
<option value="男">类型男</option>
<option value="女">类型女</option>
</select>
性别:
<select onchange="alert(this.value);">
<option value="">性别：</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="text" size="8">
<input type="submit" value="提交表单" />
</form>
</body>
</html>
可以参考这篇文档https://www.jb51.net/jiaoben/21397.html
您可能感兴趣的文章: