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. 【多线程学习笔记整理】002_线程的停止、暂停、与yield

    一.停止线程的三种方式 停止线程是多线程中的一个很重要的点,停止线程意味着在线程处理完当前任务之前终止正在做的操作,但是如果不能正确的操作,可能会发生不可预期的结果. 1)使用退出标志,使线程正常退出 ...

  2. Git冲突和解决冲突

    1.产生冲突原因 产生:多个开发者同时使用或者操作git中的同一个文件,最后在依次提交和push的时候,第一个操作的是可以正常提交的,而之后的开发者想要执行pull(拉)和pull(push)操作的时 ...

  3. day24 python学习 类 画元，命名空间作用域，组合，人狗大战升级

    类命名空间与对象.实例的命名空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量 动态属性就 ...

  4. IEPNGFix 解决IE6支持PNG透明问题

    IE6本身是支持索引色透明度(PNG8)格式,但不支持真彩色透明度(PNG24)格式. 使用IE PNG Fix 2.0可以完美解决IE6支持PNG透明问题,而且支持背景定位和重复属性. IE PNG ...

  5. REST与RESTFul API最佳实践

    我经常会面试一些做PHP的开发者,让我很奇怪的是,10个人总有8个多不知道什么是REST服务,甚至是没有听说过.但RESTFul API已经是现在互联网里对外开放接口的主流模式,可参考: 豆瓣API  ...

  6. Codelf 变量取名

    Codelf 变量取名 可以看到别的变量是怎么命名的,站在巨人的肩膀上.

  7. saltops 安装及相关环境安装

    本次布署测试环境 阿里云 Centos 7.3 1.安装nginx,这里采用yum 安装方式 A.yum install nginx B.创建开机启动 systemctl enable nginx.s ...

  8. Centos 6.5 yum 安装Apache软件

    首先在系统上面查询一下是否已经安装了apache 软件[Apache软件在linux系统里的名字是httpd] rpm    -qa    httpd 如果有返回的信息,则会显示已经安装的软件.如果没 ...

  9. 洛谷 3784(bzoj 4913) [SDOI2017]遗忘的集合——多项式求ln+MTT

    题目:https://www.luogu.org/problemnew/show/P3784 https://www.lydsy.com/JudgeOnline/problem.php?id=4913 ...

  10. java成员内部类

    java成员内部类依赖于外部类而存在,故创建内部类需要首先创建其关联的外部类. public class Test { public static void main(String args[]) { ...