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. hdu 5285 二分图黑白染色

    题意:给出 n 个人,以及 m 对互不认识的关系,剩余的人都互相认识,要将所有人分成两组,组内不能有互不认识的人,要求每组至少有一人,并且第一组人数尽量多,问两组人数或不可能时单独输出 BC 48 场 ...

  2. org.apache.commons.lang3.Validate

    Validates.notBlank(user.getName(), "必须提供name");

  3. ubuntu 远程gui显示

    图像从定向: ubuntu 显示系统xterm  重点是设置DISPLAY variable以及保证ubuntu和suse在同一网段即相互ping通,利用ssh -XY的方式重定向图像. 1.直接ss ...

  4. 【BZOJ3110】【Zjoi2013】K大数查询 - 2

    之前用权值线段树套区间线段树水过,现在再练习一下整体二分 原题:有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b ...

  5. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 no-loop

    转载至:https://blog.csdn.net/wo541075754/article/details/75201934 no-loop 定义当前的规则是否不允许多次循环执行,默认是 false, ...

  6. LG2521 [HAOI2011]防线修建

    题意 题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢? ...

  7. day29 python 套接字socket TCP udp 形式发送信息的区别

    我们经常把socket翻译为套接字,socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信. socket起源于UNIX,在 ...

  8. search bar 创建的一些文章

    1.   http://blog.csdn.net/oscarxie/article/details/1434608 2.   http://blog.csdn.net/oscarxie/articl ...

  9. HTTP协议中的长连接、短连接、长轮询、短轮询

    长连接.短连接,指的是TCP连接.长连接是为了复用TCP连接. 长轮询中,服务器如果检测到库存量没有变化的话,将会把当前请求挂起一段时间(这个时间也叫作超时时间,一般是几十秒).在这个时间里,服务器会 ...

  10. vue-cli 项目构建性能分析工具

    修改package.json { ... "scripts": { ... //新增 "analyz": "NODE_ENV=production n ...