我有用过这个纯修改input属性的

本人修改后的代码和效果图(修的不好), 这个是改动最简单的:

css代码

  1. input[type=checkbox]{
  2. visibility: hidden;
  3. }
  4.  
  5. input[type="checkbox"]{
  6. -webkit-appearance: none;
  7. vertical-align:middle;
  8. margin-top:;
  9. background:#fff;
  10. border:#999 solid 1px;
  11. border-radius: 3px;
  12. min-height: 12px;
  13. min-width: 12px;
  14. }
  15. input[type="checkbox"]:checked {
  16. background: #E75213;
  17. }
  18. input[type=checkbox]:checked::after{
  19. content: '\EA06';
  20. top: 3px;
  21. left: 3px;
  22. position: absolute;
  23. background: white;
  24. border: #fff solid 2px;
  25. border-top: none;
  26. border-right: none;
  27. height: 6px;
  28. width: 10px;
  29. -moz-transform: rotate(-45deg);
  30. -ms-transform: rotate(-45deg);
  31. -webkit-transform: rotate(-45deg);
  32. transform: rotate(-45deg);
  33. }

HTML代码

  1. <div>
  2. <input type="checkbox" />
  3. </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的更多相关文章

  1. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. ZH奶酪:纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  6. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  7. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  8. 原创:纯CSS美化单复选框(checkbox、radio)

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  9. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

随机推荐

  1. IOS - 上APPSTORE为何因IPv6被拒?

    http://blog.csdn.net/wanglixin1999/article/details/52182001

  2. MySQL数据备份方法

    MySQL的备份和还原 备份:副本    RAID1,RAID10:保证硬件损坏而不会业务中止:        DROP TABLE mydb.tb1; 备份类型:        热备份.温备份和冷备 ...

  3. [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 ...

  4. [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 ...

  5. [Swift]LeetCode566. 重塑矩阵 | Reshape the Matrix

    In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...

  6. [SQL]LeetCode601. 体育馆的人流量 | Human Traffic of Stadium

    SQL架构 Create table If Not Exists stadium (id int, visit_date DATE NULL, people int) Truncate table s ...

  7. Mac下 .bash_profile 和 .zshrc 两者之间的区别

    这是我碰到的需要 source 之后才能使用环境变量的问题,我就不细究了,说说我的看法. .bash_profile 中修改环境变量只对当前窗口有效,而且需要 source ~/.bash_profi ...

  8. BBS论坛(十)

    10.1.客户端权限验证功能完成 (1)cms/cms_profile 显示当前用户的角色和权限 <tr> <td>角色:</td> <td> {% f ...

  9. lambda表达式中的排序问题

    新月新气象,10月第一篇,这也是我工作的第一天,这一篇文章我们要讲到lambda的排序问题 我是这样排序的 var list = DB.company.OrderBy(x=>x.isfreeze ...

  10. node 调试相关

    #0 node 正确的书写方式 为了防止后面出现混乱的各种书写,先来了解一下如何正确书写 node 的名称. 下面使用来自@bitandbang 推文中的图片展示如何正确书写 node 名称. nod ...