【HTML/CSS】表单美化

来源：互联网发布：化妆品网络销售技巧编辑：程序博客网时间：2024/05/17 23:05

表单美化单选按钮

<!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>表单美化单选按钮</title><style>*{padding:0;margin:0;}.type{width:400px;height:32px;border:1px solid #0F0;margin:30px auto;}.type a{text-decoration:none;color:#666;}body{font:12px/22px 微软雅黑;}.type dl{height:32px;line-height:32px;padding-left:8px;}.type dt{float:left;}dd{float:left;margin:0 10px  0 10px;}.type dd a{display:block;position:relative;padding-left:33px;}a:hover{color:#F00;text-decoration:underline;}b{display:block;width:20px;height:20px;background:#999;position:absolute;top:6px;left:0;border-radius:50%;padding:1px;border:1px solid;border-radius:50%;background:#666;background-clip:content-box;}a:hover b{background:#0F0;}.selected b{background:#F00;}</style></head><body><div class="type"><!--<form action="#" method="post" name="typeform"><lable>配送类型：</label>    <input type="radio" name="type" checked="checked"/><label>全部</label>    <input type="radio" name="type"/><lable>京东配送</lable>    <input type="radio" name="type"/><label>第三方配送</label></form>--><!--模拟的方式--><dl><dt>配送类型:</dt>    <dd><a href="#" class="selected"><b></b>全部</a></dd>    <dd><a href="#"><b></b>京东配送</a></dd>    <dd><a href="#"><b></b>第三方配送</a></dd></dl></div></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>表单美化单选按钮</title><style>*{padding:0;margin:0;}.type{width:400px;height:32px;border:1px solid #0F0;margin:30px auto;}.type a{text-decoration:none;color:#666;}body{font:12px/22px 微软雅黑;}.type dl{height:32px;line-height:32px;padding-left:8px;}.type dt{float:left;}dd{float:left;margin:0 10px  0 10px;}.type dd a{display:block;position:relative;padding-left:33px;}a:hover{color:#F00;text-decoration:underline;}b{display:block;width:20px;height:20px;background:#999;position:absolute;top:6px;left:0;border-radius:50%;padding:1px;border:1px solid;border-radius:50%;background:#666;background-clip:content-box;}a:hover b{background:#0F0;}.selected b{background:#F00;}</style><script>function show(index){var dd=document.getElementById("type").getElementsByTagName("dd");for(var i=0;i<dd.length;i++){if(i==index){dd[i].className="selected";}else{dd[i].className=null;}}}</script></head><body><div class="type"><dl id="type"><dt>配送类型:</dt>    <dd><a href="#"  onClick="show(0)"><b></b>全部</a></dd>    <dd><a href="#" onClick="show(1)"><b></b>京东配送</a></dd>    <dd><a href="#" onClick="show(2)"><b></b>第三方配送</a></dd></dl></div></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>美化复选框</title><style>body{font:13px/26px "微软雅黑";}.typeList{width:540px;height:30px;border:1px solid #666;border-width:1px 0;margin:30px auto;overflow:hidden;}.typeList ul{height:30px;line-height:30px;padding-left:15px;}.typeList ul li{float:left;margin-right:12px;position:relative;top:-10px;}.typeList ul li input{display:none;}.typeList ul li b{height:20px;width:20px;background:#666;display:block;position:absolute;top:6px;border-radius:50%;}.typeList ul li label{padding-left:23px;}.typeList ul li:hover b{background:#0F0;}.typeList ul li label:hover{color:#F00;}.typeList ul .selected b, .typeList ul .selected:hover b{background:#F00;}</style><script>function addLoadEvent(func){var oldonload=window.onload;//得到上一个onload事件函数if(typeof window.onload!='function'){//判断类型是否为functionwindow.onload=func;}else{window.onload=function(){oldonload();//调用之前覆盖的onload事件函数func();//调用当前事件函数}}}function createTag(){//动态创建b标签var li=document.getElementById("checkList").getElementsByTagName("li");var label;for(var i=0;i<li.length;i++){label=li[i].getElementByTagName("label");var bTag=document.createElement("b");li[i].insertBefore(bTag,label[0]);}}function checklist(){//点击后的显示alert("test");var li=document.getElementById("checkList").getElementsByTagName("li");for(var i=0;i<li.length;i++){li[i].onClick=function(){if(this.className=="selected"){this.className=null;}elsethis.className="selected";}}}//window.onload=createTag;只能加载一个函数addLoadEvent(createTag);addLoadEvent(checklist);</script></head><body><div class="typeList"><form action="#" method="post" name="typeList"><ul id="checkList" style="list-style:none"><li class="selected"><input type="checkbox" name="typeList" id="xiao" /><b></b><label for="xiao">消费者保障</label></li>    <li><input type="checkbox" name="typeList" id="broken" /><b></b><label for="broken">破损补寄</label></li>    <li><input type="checkbox" name="typeList" id="sevendays" /><b></b><label for="sevendays">七天退换</label></li>    <li><input type="checkbox" name="typeList" id="good" /><b></b><label for="good">正品保障</label></li>    <li><input type="checkbox" name="typeList" id="ele" /><b></b><label for="ele">电子凭证</label></li>    <li><input type="checkbox" name="typeList" id="wang" /><b></b><label for="wang">旺旺在线</label></li>    <li><input type="checkbox" name="typeList" id="pay" /><b></b><label for="pay">货到付款</label></li>    <li><input type="checkbox" name="typeList" id="pinpai" /><b></b><label for="pinpai">品牌授权</label></li>    <li><input type="checkbox" name="typeList" id="credit" /><b></b><label for="credit">信用卡</label></li></ul></form></div></body></html>

Javascript没起作用，还没找到哪里错了。。

阅读全文

0 0