http://www.w3cfuns.com/blog-5422889-5398674.html

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <style>
  6.     .p_check{position:relative;display:inline-block;width:18px;height:18px;border:2px solid #FF6980;vertical-align:middle;}
  7.     .p_check input{opacity:0;}
  8.     .p_check input+span{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FF6980;}
  9.     .p_check input+span:after{display:inline-block;content:"";margin:4px 0 0 7px;width:4px;height:8px;border:2px solid #FFF;border-left-width:0;border-top-width:0;vertical-align:top;
  10.     transform:rotate(45deg);
  11.     -moz-transform:rotate(45deg);
  12.     -webkit-transform:rotate(45deg);
  13.     -o-transform:rotate(45deg);
  14.     -ms-transform:rotate(45deg);
  15.     }
  16.     .p_check input:checked+span{display:inline-block;}
  17.   </style>
  18.  </head>
  19.  <body>
  20.       <p>
  21.          <label class="p_check"><input type="checkbox" checked="checked" value="" /><span></span></label>
  22.          <a>哈哈哈哈哈哈</a>
  23.        </p>
  24.        <p>
  25.          <label class="p_check"><input type="checkbox"  value="" /><span></span></label>
  26.          <a>呵呵呵呵呵呵</a>
  27.        </p>
  28.  </body>
  29. </html>

checkbox的美化(转)的更多相关文章

  1. html checkbox样式美化

    思路:使用label结合checkbox,背景图片进行美化. 原理: 1. for 属性规定 label 与哪个表单元素绑定,显式绑定和隐式绑定,均可实现checkbox的选用与取消效果,具体见:&l ...

  2. css3实现对radio和checkbox的美化

    一,如何隐藏小程序中的很粗的滚动条,实现页面的美化?   tit: 在开发小程序的过程中,无论是横向或者纵向当产生滚动条时,系统默认的滚动条会很粗,效果展示十分难看,我们可以通过设置如下wxss代码实 ...

  3. 表单元素——checkbox样式美化

    一.背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果. 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾.接下来说说怎样实现该效果. 二.解 ...

  4. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  5. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  6. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  7. Android 有趣味的GridView

    工作这么久以来,都是以解决需求为目标.渐渐发现这种学习方式不好,学到的知识能马上解决问题,但没有经过梳理归纳.故想系统总结下一些有趣味的知识点.在这篇博客中想以一个例子系统讲解下GridView控件涉 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. css的一些复习

    css,全称Cascading Style Sheets,层叠样式表. css选择器是从右往左解析的,解析速度会比较快. 选择器 选择器权重 !important 优先级最高 元素属性 优先级高 相同 ...

随机推荐

  1. 利用Fierce2查询子域名

    http://pnig0s1992.blog.51cto.com/393390/368428 安装方法引用Mickey的: 1.Mickey@pentestbox:/pentest/enumerati ...

  2. BZOJ1095: [ZJOI2007]Hide 捉迷藏【线段树维护括号序列】【思维好题】

    Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩 捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条 ...

  3. Quartz（一）：Cron表达式

    正文 1. 表达式介绍 Cron:cron表达式用于配置cronTrigger的实例.cron表达式实际上是由七个子表达式组成.这些表达式之间用空格分隔. Cron格式:[秒] [分] [小时] [日 ...

  4. wireshark 抓包过滤器

    wireshark 抓包过滤器 https://www.cnblogs.com/laoxiajiadeyun/p/10365073.html 过滤器分为抓包过滤器和显示过滤器,抓包过滤器会将不满足过滤 ...

  5. .gitignore忽略git版本库中的文件(夹)

    # 忽略*.o和*.a文件 *.[oa] # 忽略*.b和*.B文件,my.b除外 *.[bB] !my.b # 忽略dbg文件和dbg目录 dbg # 只忽略dbg目录,不忽略dbg文件 dbg/ ...

  6. 在虚拟机中使用Ghost系统盘安装

    我们在网上下载了很多的Ghost版的系统盘,如番茄花园的GHOST.深度GHOST.中关村GHOST.电脑公司装机GHOST,等等的很多,那么如何安装到虚拟机中?这里讲解给初学者的,如果你认为你是高手 ...

  7. Linux下编译安装nginx并且监控

    一.安装Nginx 使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好. 安装make: yum -y install gcc automake ...

  8. [转]csharp:Microsoft.Ink 手写识别（HandWriting Recognition）

    原贴:http://www.cnblogs.com/geovindu/p/3702427.html 下載: //Microsoft Windows XP Tablet PC Edition 2005 ...

  9. java Map实例

    此段资料在自于<黑马程序员_毕向东_Java基础视频教程第16天-06-集合(Map练习)> HashMap 如果对象可能会产生很多对象,可能就会需要存储,就有可能会存到hashSet(哈 ...

  10. [OI向？] ubuntu下一些常用的技巧

    想起来什么就写什么吧. Ubuntu下的对拍程序 python是最为简便的. from os import system while True: system("./make > in ...