更多>
最新下载
jQuery点击文字滚动Scrollocue插件
jQuery点击文字滚动Scrollocue插件是一款用于构建一个简单的提示提词器系统的jQuery小插件。本作品由【站长素材】收集整理,转载请注明出处!
0
2025-12-19
24小时阅读排行榜
- 1 列表布局样式重复怎么办_借助grid统一列宽规则
- 2 mysql启动命令如何指定端口_mysql启动命令端口配置详细教程
- 3 html5如何给搜索框加图标按钮_html5按钮图标与点击事件【指南】
- 4 什么是JavaScript反射_Reflect对象提供了哪些能力
- 5 Linux进程上下文切换高怎么办_性能瓶颈分析方法【教程】
- 6 如何操作dom_javascript中怎样动态修改网页?
- 7 Grid网格布局如何让内容自动换行_使用auto-fill与minmax控制栅格数量
- 8 css表单输入框聚焦变化太突然怎么办_为border和box-shadow加过渡
- 9 如何在Golang中处理字符和Unicode_使用rune和utf8包操作
- 10 JavaScript如何创建自定义事件?
- 11 c++ Cpprestsdk怎么用 c++ HTTP客户端/服务端开发【教程】
- 12 如何使用Golang实现结构体拷贝_浅拷贝和深拷贝方法示例
- 13 html5如何发布网站_HTML5网站发布到服务器的步骤【发布指南】
- 14 css子元素顺序需要临时调整怎么办_使用order属性灵活改变顺序
- 15 javascript Canvas如何绘图_怎样实现一个简单的动画效果?
更多>
最新教程
-
- Node.js 教程
- 14120 2025-08-28
-
- CSS3 教程
- 1540677 2025-08-27
-
- Rust 教程
- 21824 2025-08-27
-
- Vue 教程
- 24338 2025-08-22
-
- PostgreSQL 教程
- 21058 2025-08-21
-
- Git 教程
- 8298 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
