CSS学习笔记三：自定义单选框，复选框，开关
一点一点学习CCS，这次学习了如何自定义单选框，复选框以及开关。
一、单选框
1、先写好body里面的样式，先写几个框
<body>
<div class="radio-1">
<input type="radio" name="radio-1" id="radio-1-1">
<label for="radio-1-1"></label> <input type="radio" name="radio-1" id="radio-1-2">
<label for="radio-1-2"></label> <input type="radio" name="radio-1" id="radio-1-3">
<label for="radio-1-3"></label> </div>
</body>
用input写好radio在旁边显示，这个label中的for 属性的值与控件 id 是一样的效果。这里在下面将label的样式如同按钮的样式编写
<style type="text/css">
.radio-1{
width: 980px;
margin: 0 auto;
padding: 3% 0;
text-align: center;
font-size: 28px;
} .radio-1 [type="radio"]{
display: none; }
.radio-1 label{
display: inline-block;
position: relative;
width: 60px;
height: 60px;
border:1px solid #ccc;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
border-radius: 100%
}
.radio-1 label:after{
content: '';
position: absolute;;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background-color: #81C2D6;
border-radius: 50%;
transform: scale(0);
/*transition: transfrom .2s ease-out;*/
}
.radio-1 [type="radio"]:checked + label{
background-color: #eee;
/*transition: background-color .2s ease-in;*/
}
.radio-1 [type="radio"]:checked + label:after{
transform: scale(1);
/*transition: transfrom .2s ease-in;*/
}
</style>
.radio-1 [type="radio"]{
display: none;} 这个样式是把由该选择器中包含的radio都不让其显示，差不多就是隐藏的意思；
二、复选框
.checkbox-1{
width: 980px;
margin:0 auto;
text-align:center;
padding: 3% 0;
background-color:#9cc;
}
.checkbox-1 [type="checkbox"]{
display: none;
}
.checkbox-1 label{
display: inline-block;
width: 10px;
height: 10px;
padding: 9px;
border:1px #ccc solid;
background-color: #fff;
color: #333;
margin-right: 10px;
overflow: hidden ;
position: relative;
cursor: pointer;
}
.checkbox-1 label:after{
content: 'A';
font-family: Arial;
color: #fff;
background-color: #999;
width: 26px;
height: 26px;
line-height: 26px;
position: absolute;;
left: 1px;
top: 1px;
border-radius: 4px;
text-align: center;
transform: translateY(-30px);
transition: transform .2s ease-out;
}
.checkbox-1 [type="checkbox"]:checked +label:after{
transform: translateY(0);
transition: transform .2s ease-in;
}
第一个基本样式是设置整体背景，第二样式是将input隐藏掉，只显示出写的label。因为for 属性相当与id属性所以label 所对应的也是input的输入值，在label样式，设置其display为内嵌式，同时设置其长宽，背景颜色以及长宽，当你点击按钮的时候的checked则将after的内容改变位置，本身在label中就设置了超过label设置的长宽的东西都会被隐藏，而一开始after中的东西拜访的位置就往上移动一定距离，当点击后，则修改样式中的translate，即改变其位移，回到原来的位置。
<div class="checkbox-1">
<input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-1-1">
<label for="checkbox-1-1"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
<label for="checkbox-1-2"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
<label for="checkbox-1-3"></label> </div>
三、开关
.checkbox-2 [type="checkbox"]{
display: none;
}
.checkbox-2{
width: 980px;
margin:0 auto;
text-align:center;
padding: 3% 0;
background-color:#fc9;
}
.checkbox-2 label{
display: inline-block;
width: 68px;
height:34px;
border:1px solid #eee;
border-radius: 18px;
background-color: #fafafa;
margin-right: 10px;
cursor: pointer;
position: relative;
transition: background-color .1s ease-in;
}
.checkbox-2 label:after{
content: '';
position: absolute;
left: 1px;
top:1px;
width: 30px;
height: 30px;
border:1px solid #eee;
border-radius: 50%;
background-color: #fff;
transition: left .1s ease-out;
}
.checkbox-2 [type="checkbox"]:checked +label{
background-color: #3c6;
transition: background-color .1s ease-in;
}
.checkbox-2 [type="checkbox"]:checked +label:after{
left: 35px;
transition: left .1s ease-out;
}
在label 中先把背景设置好，基础的背景，一个椭圆，在after中设置一个小圆圈，设置好背景颜色，在点击该开关后，将该小圆圈向左移动，同时将该背景颜色更改为绿色。
<div class="checkbox-2">
<input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-2-1">
<label for="checkbox-2-1"></label> <input type="checkbox" name="checkbox-1" id="checkbox-2-2">
<label for="checkbox-2-2"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
<label for="checkbox-2-3"></label> </div>
CSS学习笔记三：自定义单选框，复选框，开关的更多相关文章
- Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- selenium+Python（定位 单选、复选框，多层定位）
1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...
随机推荐
- mpi中的广播
MPI可以实现一对多的集合通信,最常用的是广播:某个进程将数据广播到所有其他进程,最终的结果就是每个进程都有一份广播的数据.MPICH中的广播函数是MPI_Bcast(void* buffer,int ...
- 【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
一. Application用途 1. Application用途 创建Application时机 : Application在启动的时候会调用Application无参的构造方法创建实例; Appl ...
- Android For JNI(一)——JNI的概念以及C语言开发工具dev-c++,编写你的第一个C语言程序，使用C启动JAVA程序
Android For JNI(一)--JNI的概念以及C语言开发工具dev-c++,编写你的第一个C语言程序 当你的Android之旅一步步的深入的时候,你其实会发现,很多东西都必须去和framew ...
- XMPP系列(二)----用户注册和用户登录功能
1.创建一个新工程 2.导入XMPP框架 最新的XMPP框架下载地址:https://github.com/robbiehanson/XMPPFramework 将XMPP的几个文件夹拖进工程中,需要 ...
- iOS监听模式系列之对APNs的认知与理解
前言: APNs 协议在近两年的 WWDC 上改过两次, 15 年 12 月 17 日更是推出了革命性的新特性.但在国内传播的博客.面试题里关于 APNs 的答案全都是旧的.错的. 导航: 对 APN ...
- HBase Master 启动
–>首先初始化HMaster –>创建一个rpcServer,其中并启动 –>启动一个Listener线程,功能是监听client的请求,将请求放入nio请求队列,逻辑如下: –&g ...
- linux下由带-开头文件想到的
如果要删除文件-aaa,使用rm -aaa是不行的,rm会认为-后面的是参数.2种办法: 1 带明确路径指示 rm ./-aaa 2 使用 -- :rm -- -aaa 因为命令如果发现参数中有--, ...
- FCL源码中数组类型的学习及排序函数Sort函数的分析
Array 是所有数组的基类ArrayList 解决了所有Array 类的缺点 能动态扩容, 但是类型不安全的,而是会有装箱与拆箱的性能开销List<T> 则是解决了ArrayLis ...
- properties类是Hashtable的子类
properties类是Hashtable的子类 增加了将Hashtable对象中的关键字保存到文件和从文件中读取关键字和值到Hashtable对象中的方法 Properties.store方法存储P ...
- 信息化建设中的IT规划精要
IT规划在信息化建设中发挥着"定位"和"导航"的作用,IT规划理论方法更是博大精深,细细讲来,会成为IT版本的"一千零一夜".因此,本文以& ...