<!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. linux下限定连接ip和端口

    1.限制端口 vim /etc/ssh/sshd_config 修改连接端口 修改之后重启sshd服务 service sshd restart 再次连接时就需要使用修改后的端口去连接了 备注:判断修 ...

  2. oracle之三rman 不完全恢复

    rman 不完全恢复 9.1 rman 不完全恢复的三个标准模式:基于time.基于scn和基于sequence: 范例1:恢复过去某个时间点误操作,一般使用基于time或scn. 1)环境:有一套全 ...

  3. [程序员代码面试指南]字符串问题-回文最少分割数(DP)

    问题描述 给定一个字符串,输出把它全部切成回文子串的最小分割数. 例:str="ACDCDCDAD",输出2. 解题思路 DP 存储结构 dp数组dp[len+1],dp[i]表示 ...

  4. 浅入ABP(1)：搭建基础结构的 ABP 解决方案

    浅入ABP(1):搭建基础结构的 ABP 解决方案 目录 浅入ABP(1):搭建基础结构的 ABP 解决方案 搭建项目基础结构 ApbBase.Domain.Shared 创建过程 ApbBase.D ...

  5. 【Jenkins】三、设置定时任务

    1.点击工程(Test1), 选择左侧的配置 2.选择"构建触发器"下面的"定时构建" 3.填写定时规则(这里设置每隔30分钟执行一次) 4.定时规则语法字段 ...

  6. Elasticsearch安装、原理学习总结

    ElasticSearch ElasticSearch概念 Elasticsearch是Elastic Stack核心的分布式搜索和分析引擎. 什么是Elastic Stack Elastic Sta ...

  7. 实现队列的基本操作(数据结构)-python版

    class Queue: def __init__(self): self.entries = [] self.length = 0 self.front = 0 def put(self, item ...

  8. bellman-ford算法求K短路O(n*m)，以及判负环O(n*m)

    #include<iostream> #include<algorithm> #include<cstring> using namespace std; cons ...

  9. dubbo学习（一）认识dubbo

    一.发展背景 单一应用架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的数据访问框架(ORM)是关键. 垂直应用架构 当访问量逐渐增大, ...

  10. dubbo学习（七）dubbo项目搭建--生产者（服务提供者）

    PS:  项目架子以及工程间的maven依赖配置暂时省略,后续看情况可能会单独写一篇文章捋捋框架结构,先马克~ 配置和启动 1.pom文件引入dubbo和zookeeper的操作客户端 <!-- ...