<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5 CSS?τ???? ?П?}</title>
<style>
.wrap {
width: 500px;
background-color: #EEE;
border: 2px solid #DEF;
}

input[type='checkbox'] {
display: none;
}

label {
display: inline-block;
width: 60px;
height: 60px;
position: relative;
margin: 20px 120px 0 20px;
background: url(../blank.png);
background-position: 0 0px;
-webkit-transition: background 0.5s linear;
}

input[type='checkbox']:checked+label {
background-position: 0 -60px;
}

label::after {
content: attr(data-name);
/* 利用attr可以减少css代码量*/
display: inline-block;
position: relative;
width: 120px;
height: 60px;
left: 100%;
vertical-align: middle;
margin: 10px;
/* line-height: 60px; */
}
</style>
</head>
<body>
<div class="divcss5">
<div class="wrap">
<input type="checkbox" id="checkbox01" />
<label for="checkbox01" data-name="点点点点"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02" data-name="点点点点"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03" data-name="点点点点"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04" data-name="点点点点"></label>
<input type="checkbox" id="checkbox05" />
<label for="checkbox05" data-name="点点点点"></label>
<input type="checkbox" id="checkbox06" />
<label for="checkbox06" data-name="点点点点"></label>
<input type="checkbox" id="checkbox07" />
<label for="checkbox07" data-name="点点点点"></label>
<input type="checkbox" id="checkbox08" />
<label for="checkbox08" data-name="点点点点"></label>
<input type="checkbox" id="checkbox09" />
<label for="checkbox09" data-name="点点点点"></label>
<input type="checkbox" id="checkbox10" />
<label for="checkbox10" data-name="点点点点"></label>
</div>
</div>
</body>
</html>

纯CSS+HTML自定义checkbox效果[转]的更多相关文章

  1. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  2. 纯 CSS 解决自定义 CheckBox 背景颜色问题

    CodePen 需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里 主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个 ...

  3. CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  4. 纯CSS美化的checkbox 和 radio

    html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...

  5. 纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  6. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  7. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  8. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  9. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

随机推荐

  1. 掌控安全sql注入靶场pass-05

    1.判断注入点 1 and 1=1 1 and 1=2 考虑存在布尔盲注 布尔盲注解释 当不能像前面那样直接在网页中显示我们要的数据时就需要用到盲注,来得到数据库之类的名字.基于布尔的盲注就是通过判断 ...

  2. Java源码之HashMap的hash篇

    提到哈希,我们脑袋中立马就会闪过一个方法,就是hashCode(),没错.就是这个! 我们知道HashMap是通过 数组+链表 的结构进行数据存储的,有数组就会有索引,而HashMap内的数据要存储在 ...

  3. Android实现二值点阵图识别

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 前言 我这几天在做一个东西,就是一张像二维码这样的 n*n ...

  4. JDK15正式发布，划时代的ZGC同时宣布转正

    你发任你发,我用Java8.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众号[BA ...

  5. hystrix动态修改参数

    Hystrix 从入门到深入——运行时修改动态配置 /** * * @author zhangshuo * */ @Component public class DynamicConfigSource ...

  6. linux之磁盘整理

    yum安装的时候报错没有磁盘空间,需要整理 就需要查看下目前的磁盘使用情况 首先是df -hl查看从磁盘使用 可以到根目录下看看文件夹大小 du -sh * 或者下面的命令 接下来我们要删除东西整理磁 ...

  7. defer 延迟调用

    1. 延迟调用 defer 的用法很简单,只要在后面跟一个函数的调用,就能实现将这个  xxx 函数的调用延迟到当前函数执行完后再执行. defer xxx()   这是一个很简单的例子,可以很快帮助 ...

  8. 快速上手开发——JFinal配置（全步骤图文解析）

    摘要: 因为发现官网上只有Eclipse的配置文档,就写了这篇基于IDEA+maven的配置流程.本文使用安装了maven插件的IDEA进行配置,为了照顾IDEA新手,几乎每个步骤都截了图. 环境说明 ...

  9. PyCharm专业版编辑器安装（含破解步骤）

    一.首先下载好安装包: 二.安装步骤: 1.双击安装包,打开安装界面,点击"next": 2.选择安装路径,点击"next": 3.电脑是64位的就勾选64-b ...

  10. Java源码赏析（二）Java常见接口

    一.Comparable接口 package java.lang; import java.util.*; public interface Comparable<T> { /** * i ...