【HTML/CSS】表单美化
2024-06-06 17:33:29
表单美化单选按钮
<!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】表单美化相关推荐
- JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
- html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...
- html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
- 我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！
背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
- div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
- HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折 文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折 前言 一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
- 暑期学习日记19：CSS表单
通过使用 CSS,可以极大地改善 HTML 表单的外观,如: 使用 width 属性来确定输入字段的宽度. 使用 padding 属性在文本字段内添加空间. 使用 border 属性更改边框的粗细和颜 ...
- label美化css,表单label美化代码
化表单,效果如下: 每个lebal有箭头的背景 有焦点的lebal背景高亮 示例如下: 代码如下: 复制代码代码如下: 姓 名 邮 件 css代码: 复制代码代码如下: #commentform{ f ...
- Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...
- 浅析Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...
最新文章
- 新手焊接电路板_【实验】新手焊接电路板的不完全指南
- activiti 5.15.1 动态手动通过java编码方式，实现创建用户任务，动态指定个人，用户组，角色，指定监听的实现...
- MongonDB 知识
- 换64位Win7了，感觉还行
- win32 api 文件操作！
- WinForm中使用Excel控件
- Spring、SpringBoot常见面试题与答案
- Linux是最安全的操作系统么
- ECMAScript6 模版字符串
- c语言程序个位,C语言位字段
- 中南大学 科学计算和MATLAB 初级语言学习01_02
- 中文分词的python实现----HMM、FMM
- cocos2d-x 使用BMFont生成中文字体并应用
- 无需易语言模块实现任何组件透明加自汇皮肤效果
- 安徽省计算机二级水平考试试卷,安徽省计算机二级考试理论试题(附答案)
- python sdk是什么意思_什么是 SDK？
- 正则系列4： re.sub用法
- 【华为OJ】【042-矩阵乘法】
- 单链表的整表创建（头结点版）
- 中文参考文献如何导出+如何插入参考文献