纯CSS修改checkbox复选框样式-02
我有用过这个纯修改input属性的
本人修改后的代码和效果图(修的不好), 这个是改动最简单的:
css代码
- input[type=checkbox]{
- visibility: hidden;
- }
- input[type="checkbox"]{
- -webkit-appearance: none;
- vertical-align:middle;
- margin-top:;
- background:#fff;
- border:#999 solid 1px;
- border-radius: 3px;
- min-height: 12px;
- min-width: 12px;
- }
- input[type="checkbox"]:checked {
- background: #E75213;
- }
- input[type=checkbox]:checked::after{
- content: '\EA06';
- top: 3px;
- left: 3px;
- position: absolute;
- background: white;
- border: #fff solid 2px;
- border-top: none;
- border-right: none;
- height: 6px;
- width: 10px;
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
HTML代码
- <div>
- <input type="checkbox" />
- </div>
参考链接:https://blog.csdn.net/qq_27717857/article/details/80684375
搜索中其他一些不错的博客; 参考以下博客, 但是不够理想
https://blog.csdn.net/u014291497/article/details/52081774
这个JS比较复杂, 可以参看
https://blog.csdn.net/iteye_19312/article/details/82582849
http://www.freejs.net/demo/214/index.html
这个概括类的博客不错
https://blog.csdn.net/hyzhang6/article/details/78780871
纯CSS修改checkbox复选框样式-02的更多相关文章
- 纯CSS修改checkbox复选框样式
借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- ZH奶酪:纯CSS自定义Html中Checkbox复选框样式
原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- 原创:纯CSS美化单复选框(checkbox、radio)
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
随机推荐
- IOS - 上APPSTORE为何因IPv6被拒?
http://blog.csdn.net/wanglixin1999/article/details/52182001
- MySQL数据备份方法
MySQL的备份和还原 备份:副本 RAID1,RAID10:保证硬件损坏而不会业务中止: DROP TABLE mydb.tb1; 备份类型: 热备份.温备份和冷备 ...
- [Java]LeetCode138. 复制带随机指针的链表 | Copy List with Random Pointer
A linked list is given such that each node contains an additional random pointer which could point t ...
- [Swift]LeetCode365. 水壶问题 | Water and Jug Problem
You are given two jugs with capacities x and y litres. There is an infinite amount of water supply a ...
- [Swift]LeetCode566. 重塑矩阵 | Reshape the Matrix
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- [SQL]LeetCode601. 体育馆的人流量 | Human Traffic of Stadium
SQL架构 Create table If Not Exists stadium (id int, visit_date DATE NULL, people int) Truncate table s ...
- Mac下 .bash_profile 和 .zshrc 两者之间的区别
这是我碰到的需要 source 之后才能使用环境变量的问题,我就不细究了,说说我的看法. .bash_profile 中修改环境变量只对当前窗口有效,而且需要 source ~/.bash_profi ...
- BBS论坛(十)
10.1.客户端权限验证功能完成 (1)cms/cms_profile 显示当前用户的角色和权限 <tr> <td>角色:</td> <td> {% f ...
- lambda表达式中的排序问题
新月新气象,10月第一篇,这也是我工作的第一天,这一篇文章我们要讲到lambda的排序问题 我是这样排序的 var list = DB.company.OrderBy(x=>x.isfreeze ...
- node 调试相关
#0 node 正确的书写方式 为了防止后面出现混乱的各种书写,先来了解一下如何正确书写 node 的名称. 下面使用来自@bitandbang 推文中的图片展示如何正确书写 node 名称. nod ...