一点一点学习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学习笔记三:自定义单选框,复选框,开关的更多相关文章

  1. Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  2. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  3. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  4. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  5. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  6. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  7. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  8. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. selenium+Python(定位 单选、复选框,多层定位)

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

随机推荐

  1. Spring揭秘 读书笔记 五 容器的启动

    Spring的IoC容器所起的作用,就是生产bean,并维持bean间的依赖关系.它会以某种方式加载Configuration Metadata(通常也就是XML格式的配置信息),然后根据这些信息绑定 ...

  2. 网站开发进阶(三十二)HTML5之FileReader的使用

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  3. ORM对象关系映射之GreenDAO高级用法

    CRUD 增加: dao.insert(Student entity);//添加一个 dao.insertInTx(Student... entity);//批量添加 删除: dao.deleteBy ...

  4. Cursor类取出数据

    重点是要调用 moveToFirst(); long id=intent.getLongExtra("id",0); Cursor cr =dbh.selectDataById(i ...

  5. 【LaTeX排版】LaTeX使用--入门基础<二>

    1.在命令之后留一个空格有下列方式: 源文件如下: \documentclass[a4paper,12pt]{book}%采用book类型(中篇论文一般采用这种类型),A4纸,字体为12磅,默认为10 ...

  6. 阿里云安装配置mysql(centos版)

    这种是利用yum下载的也可以使用xftp上传 1,安装mysql数据库 a)下载mysql源安装包:wget http://dev.mysql.com/get/mysql57-community-re ...

  7. Core Animation简介

    一.Core Animation简介 * Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代 ...

  8. ajax-------封装

    function ajax(url, fnSucc, fnFaild){ //1.创建Ajax对象 var oAjax=null; if(window.XMLHttpRequest) { oAjax= ...

  9. Java复习2.程序内存管理

    前言: 国庆节的第三天,大家都回家了,一个人在宿舍好无聊.不过这年头与其说是出去玩不如是说出去挤,所以在学校里还是清闲的好.找工作不用担心了,到时候看着你们慢慢忙:插个话题,大学都没有恋爱过,总之各种 ...

  10. 利用LinkedHashMap实现简单的缓存

    update1:第二个实现,读操作不必要采用独占锁,缓存显然是读多于写,读的时候一开始用独占锁是考虑到要递增计数和更新时间戳要加锁,不过这两个变量都是采用原子变量,因此也不必采用独占锁,修改为读写锁. ...