关键词：
一点一点学习CCS，这次学习了如何自定义单选框，复选框以及开关。
一、单选框
1、先写好body里面的样式，先写几个框
1 <body> 2 <div class="radio-1"> 3 <input type="radio" name="radio-1" id="radio-1-1"> 4 <label for="radio-1-1"></label> 5 6 <input type="radio" name="radio-1" id="radio-1-2"> 7 <label for="radio-1-2"></label> 8 9 <input type="radio" name="radio-1" id="radio-1-3"> 10 <label for="radio-1-3"></label> 11 12 </div> 13 </body>
用input写好radio在旁边显示，这个label中的for 属性的值与控件 id 是一样的效果。这里在下面将label的样式如同按钮的样式编写
1 <style type="text/css"> 2 .radio-1{ 3 width: 980px; 4 margin: 0 auto; 5 padding: 3% 0; 6 text-align: center; 7 font-size: 28px; 8 } 9 10 .radio-1 [type="radio"]{ 11 display: none; 12 13 } 14 .radio-1 label{ 15 display: inline-block; 16 position: relative; 17 width: 60px; 18 height: 60px; 19 border:1px solid #ccc; 20 background-color: #fff; 21 margin-right: 10px; 22 cursor: pointer; 23 border-radius: 100% 24 } 25 .radio-1 label:after{ 26 content: ''; 27 position: absolute;; 28 top: 10px; 29 left: 10px; 30 width: 40px; 31 height: 40px; 32 background-color: #81C2D6; 33 border-radius: 50%; 34 transform: scale(0); 35 /*transition: transfrom .2s ease-out;*/ 36 } 37 .radio-1 [type="radio"]:checked + label{ 38 background-color: #eee; 39 /*transition: background-color .2s ease-in;*/ 40 } 41 .radio-1 [type="radio"]:checked + label:after{ 42 transform: scale(1); 43 /*transition: transfrom .2s ease-in;*/ 44 } 45 </style>
.radio-1 [type="radio"]{
display: none;} 这个样式是把由该选择器中包含的radio都不让其显示，差不多就是隐藏的意思；
打开有惊喜
二、复选框
1 .checkbox-1{ 2 width: 980px; 3 margin:0 auto; 4 text-align:center; 5 padding: 3% 0; 6 background-color:#9cc; 7 } 8 .checkbox-1 [type="checkbox"]{ 9 display: none; 10 11 } 12 .checkbox-1 label{ 13 display: inline-block; 14 width: 10px; 15 height: 10px; 16 padding: 9px; 17 border:1px #ccc solid; 18 background-color: #fff; 19 color: #333; 20 margin-right: 10px; 21 overflow: hidden ; 22 position: relative; 23 cursor: pointer; 24 } 25 .checkbox-1 label:after{ 26 content: 'A'; 27 font-family: Arial; 28 color: #fff; 29 background-color: #999; 30 width: 26px; 31 height: 26px; 32 line-height: 26px; 33 position: absolute;; 34 left: 1px; 35 top: 1px; 36 border-radius: 4px; 37 text-align: center; 38 transform: translateY(-30px); 39 transition: transform .2s ease-out; 40 41 } 42 .checkbox-1 [type="checkbox"]:checked +label:after{ 43 transform: translateY(0); 44 transition: transform .2s ease-in; 45 }
第一个基本样式是设置整体背景，第二样式是将input隐藏掉，只显示出写的label。因为for 属性相当与id属性所以label 所对应的也是input的输入值，在label样式，设置其display为内嵌式，同时设置其长宽，背景颜色以及长宽，当你点击按钮的时候的checked则将after的内容改变位置，本身在label中就设置了超过label设置的长宽的东西都会被隐藏，而一开始after中的东西拜访的位置就往上移动一定距离，当点击后，则修改样式中的translate，即改变其位移，回到原来的位置。
1 <div class="checkbox-1"> 2 <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-1-1"> 3 <label for="checkbox-1-1"></label> 4 5 <input type="checkbox" name="checkbox-1" id="checkbox-1-2"> 6 <label for="checkbox-1-2"></label> 7 8 <input type="checkbox" name="checkbox-1" id="checkbox-1-3"> 9 <label for="checkbox-1-3"></label> 10 11 </div>
三、开关
1 .checkbox-2 [type="checkbox"]{ 2 display: none; 3 } 4 .checkbox-2{ 5 width: 980px; 6 margin:0 auto; 7 text-align:center; 8 padding: 3% 0; 9 background-color:#fc9; 10 } 11 .checkbox-2 label{ 12 display: inline-block; 13 width: 68px; 14 height:34px; 15 border:1px solid #eee; 16 border-radius: 18px; 17 background-color: #fafafa; 18 margin-right: 10px; 19 cursor: pointer; 20 position: relative; 21 transition: background-color .1s ease-in; 22 } 23 .checkbox-2 label:after{ 24 content: ''; 25 position: absolute; 26 left: 1px; 27 top:1px; 28 width: 30px; 29 height: 30px; 30 border:1px solid #eee; 31 border-radius: 50%; 32 background-color: #fff; 33 transition: left .1s ease-out; 34 } 35 .checkbox-2 [type="checkbox"]:checked +label{ 36 background-color: #3c6; 37 transition: background-color .1s ease-in; 38 39 } 40 .checkbox-2 [type="checkbox"]:checked +label:after{ 41 left: 35px; 42 transition: left .1s ease-out; 43 44 }
在label 中先把背景设置好，基础的背景，一个椭圆，在after中设置一个小圆圈，设置好背景颜色，在点击该开关后，将该小圆圈向左移动，同时将该背景颜色更改为绿色。
1 <div class="checkbox-2"> 2 <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-2-1"> 3 <label for="checkbox-2-1"></label> 4 5 <input type="checkbox" name="checkbox-1" id="checkbox-2-2"> 6 <label for="checkbox-2-2"></label> 7 8 <input type="checkbox" name="checkbox-2" id="checkbox-2-3"> 9 <label for="checkbox-2-3"></label> 10 11 </div>
打开有惊喜
自定义多选框和单选框css样式
直接上代码: input[type="radio"],input[type="checkbox"]{-webkit-appearance:none;outline:none;}input[type="radio"]{position:relative;width:.12rem;height:.12rem;border:1pxsolid#186D9A;border-radius:.06re 查看详情
[css揭秘]自定义单选框和复选框
很多Web前端工程师肯定都会遇到过，在项目中，UI设计师跑来跟你说，我这个地方的表单控件需要设计成这个样子那个样子。但是用CSS却不能够修改这些控件的默认样式，于是乎，只能通过div+javascript技术来进行模拟。特别是在... 查看详情
css自定义复选框和单选按钮设置(代码片段)
flutter控件——常用控件：单选开关和复选框(代码片段)
单选开关和复选框ps：Switch和Checkbox的样式局限性都比较高，建议直接自定义widget处理。Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox，虽然它们都是继承自StatefulWidget，但它们本身不会保存当前... 查看详情
flutter控件——常用控件：单选开关和复选框(代码片段)
单选开关和复选框ps：Switch和Checkbox的样式局限性都比较高，建议直接自定义widget处理。Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox，虽然它们都是继承自StatefulWidget，但它们本身不会保存当前... 查看详情
自定义单选框，复选框样式
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">div{height:50px;position:relative;}.rdo{width:30px;height:0px;background-c 查看详情
flutter--基础组件单选开关（switch）&单选框(radio)&复选框(checkbox)(代码片段)
...ListTile5.完整代码二、单选框(Radio)1.效果图2.完整代码三、复选框(Checkbox)1.效果图2.完整代码一、单选开关（Switch）1.属性constSwitch( Keykey, @requiredthis.valu 查看详情
js自定义修改复选框单选框样式，清除复选框单选框默认样式
...生效，火狐不生效。 所以自己写了个js，用li来模拟复选框和单选框的效果，很简单，7行就行。效 查看详情
自定义单选按钮：如何取消选中？ （复选框黑客）[重复]
】自定义单选按钮：如何取消选中？（复选框黑客）[重复]【英文标题】：CustomRadioButtons:Howtouncheck?(CheckboxHack)[duplicate]【发布时间】：2017-12-0716:48:52【问题描述】：我创建了一些效果很好的自定义复选框：https://codepen.io/anon/pen/jwx... 查看详情
scssbootstrappurecss自定义单选按钮/复选框(代码片段)
自定义复选框/单选按钮
】自定义复选框/单选按钮【英文标题】：customcheckboxes/radiobuttons【发布时间】：2012-01-0701:37:27【问题描述】：感谢您提前帮助我解决我的问题。我想知道是否有人有制作的经验。我在舞台上创造了每一个。目标是在影片剪辑中创... 查看详情
自定义单选框和复选框案例
效果如下：html代码：<divclass="form-inline"> <divclass="radio-wrap"> <labelclass="radio"> <inputtype="radio"name="radio"checked="checked"><i></i>是</label><label 查看详情
安卓讲课笔记5.4单选按钮和复选框(代码片段)
...、常用方法3、设置事件监听器4、注意事项（三）复选框1、继承关系图2、常用方法3、设置事件监听器（四）教学案例： 查看详情
html自定义复选框和单选按钮(代码片段)
flutter单选开关switch和复选框checkbox(代码片段)
...kBox属性介绍1.flutter中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的，当Switch或Checkbox发生改变时，会触发... 查看详情
纯css实现自定义checkbox复选框
话不多说，直入主题。众所周知原生的checkbox复选框、radio单选按钮、select选择框，不同浏览器差别较大，最重要的一点是不怎么好看，如果直接拿原生用，可能会影响整体的美观。项目中用的第三方UI这些都已经很完备，但是在... 查看详情
C ++ MFC，带有复选框的自定义网格，单选按钮[关闭]
】C++MFC，带有复选框的自定义网格，单选按钮[关闭]【英文标题】：C++MFC,CustomGridwithCheckBox,RadioButton[closed]【发布时间】：2016-01-2112:09:30【问题描述】：我想创建具有内联编辑功能、复选框、单选按钮和图像的自定义网格。我看到... 查看详情
自定义单选框选中
jq代码<scripttype="text/javascript">$(function(){$(".J_check").on(‘tap‘,function(){varis=$(this).hasClass(‘current‘);if(is){$(this).removeClass(‘current‘);}else{$(this).addClass(‘current‘);}});}); 查看详情