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

最新推荐文章于 2023-04-06 23:22:44 发布
最新推荐文章于 2023-04-06 23:22:44 发布
阅读量281 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000008267073
版权

只用纯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>
weixin_34162695
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单选框复选框样式
11-24
不同的单选和多选，是选中加个边框，加个勾勾的那种。
HTML+CSS实现单选框、复选框美观的样式
09-24
在网页设计中，单选框（Radio Button）和复选框...总之，通过HTML和CSS，我们可以轻松地实现单选框和复选框的美观样式，提升网页的用户体验。同时，要注意保持其功能性和可访问性，确保所有用户都能无障碍地使用。
input单选框和复选框自定义样式
tanrong1104的博客
03-18 775
<!-- 单选 --> <p class="select_icon"> <input type="radio" name="select3" class="icon_btn"> <span class="icon_text">46岁～55岁</span> </p> <p class="select_icon"> <input type="radio" name="select3" class="icon_btn"
复选框、单选框的自定义样式
weixin_30279751的博客
08-13 428
---恢复内容开始--- 　　在很多时候，浏览器自带的单选框和复选框的样式不够美观，并且浏览器的样式之间带有差异。已经不足以我们生产的需求。下面用css来自定义修改一下单选框与复选框的样式。 　　首先我们先看一下例子的效果： 　　 　　上图是我这边例子的效果图，最后会将整个代码贴在最后，以供参考。 复选框自定义样式 　　复选框我们最经常遇到的问题，就是对号的样式多种多...
纯css单选框
weixin_30535913的博客
09-29 45
1.没有用bootstrap时： 1 .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50; border-radius: 1px; position: relative; } 2 .has_sel:before{content: ""; width: 2p...
表单界面：改变单选框和复选框的样式
weixin_45088998的博客
09-26 1000
单选框效果： 单选框的样式是不可改变的，实际上的改变样式只是寻找别的东西来替换单选框。 css代码 input{ display: none; } span::before{ display: block; width: 20px; height: 20px; ...
纯css3单选框和复选框样式美化效果
12-13
"纯CSS3单选框和复选框样式美化效果"提供了一种创新的方式，使开发者能够告别传统的、单一的HTML单选框和复选框样式，转而采用更加吸引人的、具有动画效果的设计。这种美化效果不仅增强了用户界面的美观度，还能提升...
纯CSS Bootstrap单选框和复选框美化特效
12-13
icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件，你可以对原生的bootstrap单选框和复选框进行美化，应用不同的主题样式，甚至可以制作扁平风格的单选框和复选框。
纯css3单选按钮和复选按钮样式代码
11-04
通过这些步骤，我们已经能够使用纯CSS3创建出独特的单选按钮和复选框样式。但要注意，过度定制可能会影响其可用性和可访问性，因此在设计时应遵循WCAG等无障碍指南。在实际项目中，结合JavaScript可以实现更复杂的...
一款纯css3实现简单的checkbox复选框和radio单选框
09-25
本文将详细介绍如何使用纯CSS3实现简单而实用的复选框和单选框。 首先，CSS3提供了许多新的选择器和属性，使得我们可以自定义HTML元素的样式，包括复选框和单选框。在上述示例中，我们看到HTML代码中使用了`<input>...
单选框和复选框的样式修改
weixin_30752699的博客
09-16 185
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html</title> </head> <style> /* 单选框样式 */ .radio input { ...
css--美化html选择框
m0_73957003的博客
04-06 445
【代码】css--美化html选择框。
写出复选框和单选按钮html语言,纯css写单选框和复选框的样式和功能
weixin_33387339的博客
05-30 118
只用纯css写的单选框和复选框的样式和功能该怎么写？看这里，复制下面的代码运行一遍就知道了，快试试吧！效果截图：移动单选按钮/*纯CSS写法*/.checkbox-group input{display:none;opacity:0;}.checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+labe...
点击文字选中单选框/复选框 (模拟程序功能)
wm219的专栏
03-31 1598
摘自: bbs.pl80.com 引用请注明出入,谢谢在做OA或其它WEB版的系统时,常常想实现,点击文字而选中单选框/复选框的功能代码如下: 方法一(HTML):  全选 方法二(JS) code
11种超酷CSS3复选框样式美化效果
souhugirl的专栏
03-22 2003
这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。这些效果都可是通过相邻兄弟选择器来选择与checkbox相邻的label来实现。 在线演示：http://www.htmleaf.com/Demo/201503211557.html 下载地址
自定义单选框，复选框样式
12-06 83
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input{width: 0;height: 0;positio...
第二种 复选框的写法
qiangD的博客
07-21 1410
<form method="post" action=""> 你爱好的运动是？ <input type="checkbox" id="CheckedAll" />全选/全不选 <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="ch
uniapp单选框复选框
最新发布
09-08
在uni-app中，单选框和复选框可以使用...综上所述，uni-app提供了方便的单选框和复选框组件，可以通过设置属性和样式来满足不同的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值