【HTML/CSS】表单美化
生活随笔
收集整理的這篇文章主要介紹了
【HTML/CSS】表单美化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
表單美化單選按鈕
<!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 oldοnlοad=window.onload;//得到上一個onload事件函數if(typeof window.onload!='function'){//判斷類型是否為functionwindow.οnlοad=func;}else{window.οnlοad=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.οnlοad=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沒起作用，還沒找到哪里錯了。。
總結
以上是生活随笔為你收集整理的【HTML/CSS】表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。
