<!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. Hadoop之MapReduce开发总结

    @ 目录 1.输入数据接口:InputFormat 2.逻辑处理接口:Mapper 3.Partitioner分区 4.Comparable排序 5.Combiner合并(可选) 6.Reduce端分 ...

  2. redhat中的RHCS双机配置

    1. 主机概述 主机名 主机IP 备注 node1 192.168.1.101 模拟fence设备 node2 192.168.1.102 rhcs双机节点 node3 192.168.1.103 r ...

  3. 回归 | js实用代码片段的封装与总结（持续更新中...）

      上一次更博还是去年10月28号了,截至今天已经有整整4个月没有更新博客了,没更新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的. ...

  4. 如何在项目中使用composer的相关功能

    最近要在公司的magento项目中引用第三方库,用了composer来进行管理,composer还是非常方便的: 1.在应用的根目录下添加文件:composer.json {    "nam ...

  5. Netty之ChannelOption的各种参数

    ChannelOption.SO_BACKLOG, 1024 BACKLOG用于构造服务端套接字ServerSocket对象,标识当服务器请求处理线程全满时,用于临时存放已完成三次握手的请求的队列的最 ...

  6. 你还不会ES的CUD吗？

    近端时间在搬砖过程中对es进行了操作,但是对es查询文档不熟悉,所以这两周都在研究es,简略看了<Elasticsearch权威指南>,摸摸鱼又是一天. es是一款基于Lucene的实时分 ...

  7. leetcode1552题解【二分+贪心】

    leetcode1552.两球之间的磁力 题目链接 算法 二分+贪心 时间复杂度O(nlogn + nlogm) 1.根据题意描述,我们需要将m个球放入到n个篮子中,根据题目中数据范围描述发现m &l ...

  8. mysql 事务、隔离级别

    一.事务的四大特性(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...

  9. 刷题[网鼎杯 2020 朱雀组]phpweb

    解题思路 打开是一个蛮有意思的背景,众生皆懒狗,是自己没错了.源代码看一看,啥都没有.抓个包 诶,一看到func和p两个参数,想到了call_user_func(). 尝试着把date改成system ...

  10. ucore操作系统学习笔记(一) ucore lab1系统启动流程分析

    一.ucore操作系统介绍 操作系统作为一个基础系统软件,对下控制硬件(cpu.内存.磁盘网卡等外设),屏蔽了底层复杂多样的硬件差异:对上则提供封装良好的应用程序接口,简化应用程序开发者的使用难度.站 ...