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

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <style>

    .p_check{position:relative;display:inline-block;width:18px;height:18px;border:2px solid #FF6980;vertical-align:middle;}

    .p_check input{opacity:0;}

    .p_check input+span{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FF6980;}

    .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;

    transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -webkit-transform:rotate(45deg);

    -o-transform:rotate(45deg);

    -ms-transform:rotate(45deg);

    }

    .p_check input:checked+span{display:inline-block;}

  </style>

 </head>

 <body>

      <p>

         <label class="p_check"><input type="checkbox" checked="checked" value="" /><span></span></label>

         <a>哈哈哈哈哈哈</a>

       </p>

       <p>

         <label class="p_check"><input type="checkbox"  value="" /><span></span></label>

         <a>呵呵呵呵呵呵</a>

       </p>

 </body>

</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. 古典、SOA、传统、K8S、ServiceMesh

    古典.SOA.传统.K8S.ServiceMesh 十几年前就有一些公司开始践行服务拆分以及SOA,六年前有了微服务的概念,于是大家开始思考SOA和微服务的关系和区别.最近三年Spring Cloud ...

  2. 大家一起做训练 第一场 B Tournament

    题目来源:CodeForce #27 B 有n个人比赛,两两之间都有一场比赛,一共 n * (n - 1) / 2 场比赛.每场比赛的记录方式是 a b,表示在a和b的比赛中,a胜出,b失败. 经过研 ...

  3. test20180922 古代龙人的谜题

    题意 问题描述 Mark Douglas是一名调查员.他接受了「调查古代龙人」的任务.经过千辛万苦,Mark终于找到了一位古代龙人.Mark找到他时,他正在摆弄一些秘药,其中一些药丸由于是从很久以前流 ...

  4. 利用python 下paramiko模块无密码登录

    利用python 下paramiko模块无密码登录   上次我个大家介绍了利用paramiko这个模块,可以模拟ssh登陆远程服务器,并且可以返回执行的命令结果,这次给大家介绍下如何利用已经建立的密钥 ...

  5. dockercompose up build fail (node no such file or directory packages.json )

    docker构建项目遇到如下问题: npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/lib/node_modules/iojs-bin/no ...

  6. 一个简单的批量更新oracle 数据库中 最近的服务商名称的数据

    有一个需求是这样的,我们需要更新数据库中的数据,数据时这样的 1.大约50万以上 2. 数据中有较多的重复数据 3. 需要将表中最近的代理商的名称赋值给行中的服务商名称 4. 代理商的名称可能有多个, ...

  7. .NET基金会成立

    作者 Jonathan Allen ,译者 臧秀涛 发布于 2014年4月8日 随着.NET基金会的成立,微软在成为主要的开源参与者的道路上又前进了一步.该基金会的宗旨是“成为越来越多的开源.NET项 ...

  8. net web service 参数类型

    因为Web Services的执行是建立在XML架构之上的,所以它能够支持丰富的数据类型. 下表列出了使用SOAP协议时Web Services支持的数据类型:  类 型 含 义 基础类型 也即标准基 ...

  9. java中原子操作的实现分析

    一.CAS原理: CAS的全程即Compare And Swap,翻译成中文为比较并交换: CAS操作依赖于CPU指令CMPXCHG来实现比较并交换操作的原子性,通过查看HotSpot源码如下: 可以 ...

  10. postman的Testing examples（常用方法）

    在实现接口自动测试的时候,会经常遇到接口参数依赖的问题,例如调取登录接口的时候,需要先获取登录的key值,而每次请求返回的key值又是不一样的,那么这种情况下,要实现接口的自动化,就要用到postma ...