更多>
最新下载
jQuery自动填充表单功能代码
jQuery自动填充表单功能代码是一款利用jQueryUI的autocomplate工具实现表单的自动填充功能,数据可通过ajax从后台获取,或者从文本文件中获取都可。
0
2026-01-28
Vue记事本添加删除特效
使用vue制作简单的文本框输入关键词创建或删除计划事项记事本功能效果。可用于生活记事本备忘录特效。使用方法:参数介绍:新增(1、生成列表结构 v-for 和数组 2、获取用户输入 v-model 3、回车,新增数据 v-on .enter)--删除(数据改变和数据绑定的元素是同步变化的;时间的自定义参数;splice方法的应用)---计数(统计信息个数length)--清除(点击清除所有信息 v-
0
2026-01-28
24小时阅读排行榜
- 1 如何为 HTML 表格添加棋盘式坐标标签(A–H / 1–8)
- 2 Go 中为何不推荐使用 this 作为方法接收者名称
- 3 XPath:匹配 class 属性值不包含指定子字符串的元素
- 4 Go 中方法接收者命名规范:为何不推荐使用 this
- 5 Go 中方法接收者命名规范:为何不应使用 this 关键字
- 6 如何在 PrimeVue 中将对象数据正确渲染为 Dropdown 下拉选项
- 7 如何在单页网站中实现上一篇/下一篇按钮的平滑滚动导航
- 8 Go 中方法接收者命名:为什么不应使用 this 关键字
- 9 jQuery Bootgrid 动态切换数据源 URL 并刷新表格
- 10 如何在 Django 中通过条件筛选获取数据库的多条记录并关联其他模型
- 11 如何判断 URL 中 group/ 后是否存在动态路径段
- 12 如何使用 XPath 精确匹配不包含特定子字符串的 class 属性元素
- 13 XPath 如何匹配 class 属性值不包含指定子字符串的元素?
- 14 XPath:精准筛选不包含特定子字符串的 class 属性元素
- 15 如何根据输入框内容动态改变页面样式(如背景色)
更多>
最新教程
-
- Node.js 教程
- 16296 2025-08-28
-
- CSS3 教程
- 1546972 2025-08-27
-
- Rust 教程
- 23421 2025-08-27
-
- Vue 教程
- 25864 2025-08-22
-
- PostgreSQL 教程
- 22361 2025-08-21
-
- Git 教程
- 9316 2025-08-21
好看的CSS3的单选复选按钮美化样式
几个风格好看的CSS3单选复选按钮美化样式,简单的表单单选框、复选框美化代码。
<!DOCTYPE HTML>
<html>
<head>
<title>好看的CSS3单选复选按钮美化样式</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="holder">
<div>
<div class="tag">Checkbox Small</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
</div>
<div>
<div class="tag">Checkbox Big</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label>
<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label>
<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label>
</div>
<div>
<div class="tag">Radio Small</div>
<div class="button-holder">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br />
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
</div>
</div>
<div>
<div class="tag">Radio Big</div>
<div class="button-holder">
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br />
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br />
<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br />
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>好看的CSS3单选复选按钮美化样式</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="holder">
<div>
<div class="tag">Checkbox Small</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
</div>
<div>
<div class="tag">Checkbox Big</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label>
<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label>
<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label>
</div>
<div>
<div class="tag">Radio Small</div>
<div class="button-holder">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br />
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
</div>
</div>
<div>
<div class="tag">Radio Big</div>
<div class="button-holder">
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br />
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br />
<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br />
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn
