表单美化单选按钮
<!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>-->
&
本文探讨如何使用HTML和CSS进行表单美化，包括单选按钮和多选框的交互效果设计。同时，提到了在尝试用JavaScript增强功能时遇到的问题及尚未解决的挑战。
最低0.47元/天 解锁文章
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
