【HTML/CSS】表单美化_html表单美化-CSDN博客

本文链接：https://blog.csdn.net/idealistic/article/details/78057213

本文探讨如何使用HTML和CSS进行表单美化，包括单选按钮和多选框的交互效果设计。同时，提到了在尝试用JavaScript增强功能时遇到的问题及尚未解决的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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'){
		//判断类型是否为function
		window.ο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;
				}
				else
				this.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没起作用，还没找到哪里错了。。