HTML的checkbox和radio的美化
2024-04-08 14:42:32
HTML的checkbox和radio的美化
原文:HTML的checkbox和radio的美化
checkbox和radio的美化
checkbox：
<style type="text/css">input[type="checkbox"]{display: none;}input[type="checkbox"] + label{display: inline-block;position: relative;border: solid 2px #99a1a7;width: 35px;height: 35px;line-height: 35px;border-radius: 4px;}input[type="checkbox"]:checked + label:after{content: '\2714';font-size: 25px;color: #99a1a7;width: 35px;height: 35px;line-height: 35px;position: absolute;text-align: center;background-color: #e9ecee;}.tab{margin-top: 20px;margin-bottom: 20px;width: 100%;}.tab td{border: solid 1px #f99;font-size: 25px;line-height: 39px;}
</style><table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"><tr><td><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck101" type="checkbox" /><label for="ck101"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试101</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck102" type="checkbox" /><label for="ck102"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试102</div>测试</td><td></td></tr><tr><td style="text-align: center;"><div style="display: inline-block;"><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck103" type="checkbox" /><label for="ck103"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试103</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck104" type="checkbox" /><label for="ck104"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试104</div>测试</div></td><td>测试</td></tr>
</table><div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;"><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck201" type="checkbox" /><label for="ck201"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试201</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="ck202" type="checkbox" /><label for="ck202"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">测试202</div>
</div>View Code
radio：
<style type="text/css">input[type="radio"]{display: none;}input[type="radio"] + label{display: inline-block;position: relative;border: solid 2px #99a1a7;width: 25px;height: 25px;line-height: 25px;padding: 5px;border-radius: 19.5px;}input[type="radio"]:checked + label:after{content: ' ';font-size: 25px;color: #99a1a7;width: 25px;height: 25px;line-height: 25px;position: absolute;text-align: center;background-color: #99a1a7;border-radius: 12.5px;}input[type="radio"]:checked + label{background-color: #e9ecee;}.tab{margin-top: 20px;margin-bottom: 20px;width: 100%;}.tab td{border: solid 1px #f99;font-size: 25px;line-height: 39px;}
</style><table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"><tr><td><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd101" name="rd" type="radio" /><label for="rd101"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试101</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd102" name="rd" type="radio" /><label for="rd102"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试102</div>测试</td><td></td></tr><tr><td style="text-align: center;"><div style="display: inline-block;"><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd103" name="rd" type="radio" /><label for="rd103"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试103</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd104" name="rd" type="radio" /><label for="rd104"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试104</div>测试</div></td><td>测试</td></tr>
</table><div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;"><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd201" name="rd" type="radio" /><label for="rd201"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">测试201</div><div align="center" style="float: left; height: 39px; width: 39px;"><input id="rd202" name="rd" type="radio" /><label for="rd202"></label></div><div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">测试202</div>
</div>View Code
效果图：
posted on 2015-06-27 10:27 NET未来之路 阅读(...) 评论(...) 编辑 收藏
转载于:https://www.cnblogs.com/lonelyxmas/p/4603699.html
HTML的checkbox和radio的美化相关推荐
- html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
- checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- IE下checkbox或radio隐藏bug
由于各浏览器对checkbox或radio的渲染效果各不相同,为了美化和统一界面样式,一般会选择用js和css来自定义checkbox或radio的样式,此时一般会隐藏原始的checkbox或radi ...
- ios下点击label包含的input checkbox或radio无效问题
问题描述: 页面中有多个根据接口返回数据,动态生成的checkbox和radio选项,input元素外有一个label标签包裹着,label标签内有文字,即如下示例所示: <label>& ...
- html复选框美化插件,js和css3超酷checkbox复选框美化插件
这是一款效果超超酷的js和css3 checkbox复选框美化插件.这个checkbox复选框美化插件最大的特点是可以拖动进行复选框的多选,当你选择一个复选框后,按住它往下拖动,下面的复选框也会被选择 ...
- html 勾选框点击文字勾选,ztree点击文字勾选checkbox，radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
- html单选框怎么提交数据库,HTML复选框和单选框 checkbox和radio事件介绍
checkbox 和 radio的事件选择一度让我很迷惑. 开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发. 后来就用click m ...
- checkbox或者radio默认选中，默认不可选中
checkbox: 默认选中 <input id="checkbox1" type="checkbox" checked="checked&qu ...
最新文章
- 原生js删除html,原生js模拟v-for增加删除.html
- 后端开挂：3行代码 = 8个接口
- PIL 转opencv
- Incorrect string value: '\xF0\x90\x8D\x83...' for column 通用解决方案
- 1.Linux下libevent和memcached安装
- 年度大片：StackOverflow 2017开发者调查报告
- javascript解析机制——预解析
- BZOJ 3261: 最大异或和 [可持久化Trie]
- python输入年月日输出年月日_Python网站浪漫表白神器那些鲜为人知的技术
- 学点 C 语言(32): 函数 - 返回值
- mysql允许虚拟机访问权限_设置虚拟机安装的mysql访问权限及删除mysql
- 关于CefSharp在客户端运行报错的解决方案
- C++ 正则表达式教程：C++ 中的正则表达式与示例
- 根据仿人人客户端教程,编程实现Demo
- linux下输入ls显示时间格式,【Linux基础】linux下修改ls显示的时间格式
- 封装实现电子宠物系统的企鹅类正确输入健康值和亲密度
- gpd计算机等级,GPD 文件扩展名： 它是什么以及如何打开它？
- 无限宝服务器40,无限宝互动平台电脑版
- sw转urdf详细步骤
- 好看的vscode深色主题，搜索主题名称即可设置