纯css写单选框和复选框的样式和功能

只用纯css写的单选框和复选框的样式和功能该怎么写？看这里，复制下面的代码运行一遍就知道了，快试试吧！

效果截图：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><title>移动单选按钮</title><link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css"><style>/*纯CSS写法*/.checkbox-group input{display:none;opacity:0;}.checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {line-height: 1;position: relative;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;/*cursor: pointer;*/-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;margin:2px;}.checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {line-height: 20px;display: inline-block;width: 18px;height: 18px;margin-right: 8px;content: '';color: #fff;border: 1px solid #dce4e6;background-color: #f3f6f8;border-radius: 3px;}.checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:before{/*content:'\2022';圆点*/content:'\2713';color:#fff;background-color: #31b968;border-radius: 3px;font-size:16px;text-align: center;border-color: #31b968;}/*使用背景图片写法*/.xuan-group input{display:none;opacity:0;}.xuan-group input[type=checkbox]+label, .xuan-group input[type=radio]+label {line-height: 1;position: relative;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;/*cursor: pointer;*/-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;margin:2px;}.xuan-group input[type=checkbox]+label:before, .xuan-group input[type=radio]+label:before {line-height: 20px;display: inline-block;width: 18px;height: 18px;margin-right: 8px;content: '';color: #fff;border: 1px solid #dce4e6;background-color: #f3f6f8;border-radius: 3px;}.xuan-group input[type=checkbox]:checked+label:before,.xuan-group input[type=radio]:checked+label:before{content:' ';background:#e02222 url(images/input_checked_1.png) 2px 1px no-repeat;background-size:80% 80%;}</style>
</head>
<body><div style="border:5px solid red;"><p style="font-size:20px">纯CSS写法：</p><p>第一组单选</p><div class="checkbox-group"><input type="radio" id="one" name="dan"/><label for="one">记住密码</label></div><div class="checkbox-group"><input type="radio" id="two" name="dan"/><label for="two">记住密码</label></div><div class="checkbox-group"><input type="radio" id="three" name="dan"/><label for="three">记住密码</label></div><p>第二组单选</p><div class="checkbox-group"><input type="radio" id="one2" name="dan2"/><label for="one2">记住密码</label></div><div class="checkbox-group"><input type="radio" id="two2" name="dan2"/><label for="two2">记住密码</label></div><div class="checkbox-group"><input type="radio" id="three2" name="dan2"/><label for="three2">记住密码</label></div><p>第一组复选</p><div class="checkbox-group"><input type="checkbox" id="one3" name="fu"/><label for="one3">记住密码</label></div><div class="checkbox-group"><input type="checkbox" id="two3" name="fu"/><label for="two3">记住密码</label></div><div class="checkbox-group"><input type="checkbox" id="three3" name="fu"/><label for="three3">记住密码</label></div><p>第二组复选</p><div class="checkbox-group"><input type="checkbox" id="one4" name="fu2"/><label for="one4">记住密码</label></div><div class="checkbox-group"><input type="checkbox" id="two4" name="fu2"/><label for="two4">记住密码</label></div><div class="checkbox-group"><input type="checkbox" id="three4" name="fu2"/><label for="three4">记住密码</label></div></div><div style="border:5px solid blue;"><p style="font-size:20px">使用背景图片写法：</p><p>第一组单选</p><div class="xuan-group"><input type="radio" id="radioOne" name="picRadio"/><label for="radioOne">勾选</label></div><div class="xuan-group"><input type="radio" id="radioTwo" name="picRadio"/><label for="radioTwo">勾选</label></div><div class="xuan-group"><input type="radio" id="radioThree" name="picRadio"/><label for="radioThree">勾选</label></div><p>第一组复选</p><div class="xuan-group"><input type="checkbox" id="radioOne2" name="picBox"/><label for="radioOne2">勾选</label></div><div class="xuan-group"><input type="checkbox" id="radioTwo2" name="picBox"/><label for="radioTwo2">勾选</label></div><div class="xuan-group"><input type="checkbox" id="radioThree2" name="picBox"/><label for="radioThree2">勾选</label></div></div>
</body>
</html>

纯css写单选框和复选框的样式和功能相关推荐

css美化单选款、复选框
一款美化单选款.复选框的样式支持度: Chrome Firefox Safari Opera IE9 && IE9+ 代码: <!DOCTYPE html> <ht ...
关于单选框以及复选框的css美化方法
在工作中,遇到单选框和复选框还是一件很头疼的事情.丑就算了,关键是各个浏览器都不一样,这非常让我头疼. 以前一直用JQUERY来解决这个问题.不过js解决复选框没有问题,解决单选框就有点拙荆见肘,需要 ...
java写html的多选框,Selenium+java - 单选框及复选框处理
Selenium+java - 单选框及复选框处理一.什么是单选框.复选框? 二.被测页面html源代码 CheckBoxRadioDemo.html CheckBox.Radio练习案例复选框 ...
单选框与复选框数据回填
单选框与复选框数据回填 ·························································· 开发工具:Visual Studio 2015 关键技术: ...
Android界面编程之利用单选框和复选框实现对学历和爱好进行选择
Android界面编程之利用单选框和复选框实现对学历和爱好进行选择首先我们要了解一下单选框和复选框: , 单选框(Radio Button):当用户选择某单选按钮时,同一组中的其他单选按钮不能同时选 ...
你知道如何修改单选框、复选框、下拉框的默认样式吗
介绍 HTML 原生的单选框.复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融 ...
Android（Kotlin）图片按钮，单选框，复选框（实验课）
Android的一次"实验课布置的内容" 里面有一些可以擦考的东西所以借着CSDN来记个笔记其实也没啥第一次写留个纪念图片按钮,单选框,复选框(话不多说上代码) butt ...
HTML 单选框和复选框的使用过程的一些错误
在开始学习radio的用法的时候,觉得很简单,但在用的时候,却不知道怎么进行单选,后来查了很长时间才明白其中的道理,其中,name的值是要相等的,这里的值是什么值都可以,只要相等就行 <inpu ...
android 单选按钮对号,用“对号”和“叉号”代替单选框和复选框选中或未选中代码详解...
用"对号"和"叉号"代替单选框和复选框选中或未选中代码,使用javascript+css可以实现这样的操作! 效果如图: /p> Transitional ...

纯css写单选框和复选框的样式和功能

只用纯css写的单选框和复选框的样式和功能该怎么写？看这里，复制下面的代码运行一遍就知道了，快试试吧！

纯css写单选框和复选框的样式和功能相关推荐

最新文章

热门文章