<!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>纯js+css自定义form表单美化控件-xw素材网</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<dl class="formbox">
<form action="http://www.xwcms.net" method="get">
<dt>填写基本信息</dt>
<dd><input id="name" name="name" type="text" class="text" value="尊姓大名" /></dd>
<dd><input id="contact" name="contact" type="text" class="text" value="联系QQ或MSN" /></dd>
<dd style="z-index: 2;">
<div id="btn_come_from_drop_down" class="select_normal"></div>
<input id="come_from" name="come_from" type="text" class="text" value="你来自哪里？" />
<ul id="come_from_drop_down" class="area">
<li class="active">北京</li>
<li>上海</li>
<li>杭州</li>
<li>深圳</li>
<li>妙味课堂</li>
<li>乌鲁木奇</li>
<li>哈尔滨</li>
<li>天津</li>
<li>湖北</li>
<li>海南</li>
</ul>
</dd>
<dd class="clear">
<input id="gender" name="gender" type="hidden" />
<h2>性别</h2>
<ul class="sex">
<li id="gender_man" title="男" class="men_active"></li>
<li id="gender_woman" title="女" class="woman_normal"></li>
</ul>
</dd>
<dd class="clear">
<input id="hobby" name="hobby" type="hidden" />
<h2>爱好</h2>
<ul id="hobby_drop_down" class="hobby">
<li>上网</li>
<li>看电影</li>
<li>游泳</li>
<li>打篮球</li>
<li>唱歌</li>
<li>旅游</li>
</ul>
</dd>
<dd>
<h2>就这样！</h2>
<div class="btn"><input type="submit" value="提交" /></div>
</dd>
</form>
</dl>
</body>
</html>
纯js+css自定义form表单美化控件
3星 · 超过75%的资源 98 浏览量
2014-01-06
08:34:22
上传
评论 1
收藏 19KB ZIP 举报 
1.zip （8个子文件） 
images 
ico.gif 6KB dl_bg.gif 8KB
Thumbs.db 5KB
index.html 2KB xw素材.htm 64B 更多素材.url 186B style.css 2KB script.js 6KB资源评论
Shakira_lt2018-07-25坑的要死，下载后添了个个人信息的表单提交完了后就进到什么素材网里面了，亲你这完全是骗人吧
hddsh2014-01-16的确漂亮！谢谢
