<!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. Java源码之HashMap的hash篇

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

  2. Anaconda是个什么东东？

     2020/5/18 一.Anaconda 有什么用? 是一个安装.管理python相关包的软件,还自带python.Jupyter Notebook.Spyder,有管理包的conda工具,非常有用 ...

  3. 必考算法之 Top K 问题

    大家好,这里是<齐姐聊算法>系列之 Top K 问题. Top K 问题是面试中非常常考的算法题. 8 Leetcode 上这两题大同小异,这里以第一题为例. 题意: 给一组词,统计出现频 ...

  4. es创建普通索引以及各种查询

    创建索引 创建普通索引: PUT /my_index { "settings": { "index": { "number_of_shards&quo ...

  5. SpringMVC-12-SSM回顾与总结

    12.SSM回顾与总结

  6. Centos 7 redis、tomcat、Spring Boot添加开机自启服务

    一.redis添加开机自启 1.添加服务配置文件 [root@test system]# vim /etc/systemd/system/redis-server.service 2.服务配置文件内容 ...

  7. vue单页面条件下添加类似浏览器的标签页切换功能

    在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...

  8. Win10环境下Hadoop(单节点伪分布式)的安装与配置--bug(yarn的8088端口打不开+)

    一.本文思路 [1].配置java环境–JDK12(Hadoop的底层实现语言是java,hadoop运行需要JDK环境) [2].安装Hadoop 1.解压hadop 2.配置hadoop环境变量 ...

  9. 笨办法学Python3习题19

    学习笔记记录一下 def cheese_and_crackers(cheese_count, boxes_of_crackers): print (f"You have {cheese_co ...

  10. Token机制，session机制

    对于初学者来说,对Token和Session的使用难免会限于困境,开发过程中知道有这个东西,但却不知道为什么要用他? session机制:就是一个id号(cookie里面携带一个sessionid), ...