自定义单选按钮（radio）和自定义复选框（checkbox）

最新推荐文章于 2024-03-25 17:39:01 发布

置顶 monkeyfly007

最新推荐文章于 2024-03-25 17:39:01 发布

阅读量1.2w

点赞数 2

分类专栏： demo 文章标签：自定义单选按钮自定义复选框（checkbox）自定义radio 自定义checkbox

本文链接：https://blog.csdn.net/tel13259437538/article/details/80504186

版权

demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

在项目中经常会遇到样式美观的radio或者checkbox，经过我的观察，发现有两种实现方法：

利用点击时切换不同的图片代替radio或者checkbox，来实现选中或者取消时的样式变换效果。
利用label标签的特性以及i元素搭配伪元素（:before或者:after）进行模拟。

下面主要说第二种实现方式：

实现原理

    <!-- 结构：一个 label 标签，其中包含 input 元素和 i 元素 -->
    <label>
        <input type="radio"><i><i>男
    </label>
    <!-- 基本原理： -->
    <!-- 1.首先将 input 元素 “隐藏” 起来；-->
    （1）可以使用  visibility: hidden; opacity: 0;来实现
    （2）也可以使用 display:none;来实现
    （3）或者使用 position:absolute; left:-9999px;来实现，都是可以的
    <!-- 2.然后利用 label 标签的特性，在点击时将 input 元素选中或取消选中。 -->
    <!-- 3.i 元素结合伪类（:before或:after）模拟单选框 radio 和多选框 checkbox 的外观。 -->

具体操作

一、美化单选按钮（radio）

1.具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化单选按钮</title>
    <style>
        /*隐藏input*/
        label.bui-radios-label input[type="radio"]{
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }
        /*自定义radio*/
        label.bui-radios-label .bui-radios{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            background-color: #fff;
            border: 1px solid #979797;
            border-radius: 50%;
            vertical-align: -2px;
            margin-right: 5px;
        }
        /*单选框选中后，自定义radio的样式*/
        label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{
            position: absolute;
            content: "";
            width: 7px;
            height: 7px;
            background-color: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
        }
        label.bui-radios-label input[type="radio"]:checked + .bui-radios{
            background-color: #00B066;
            border:1px solid #00B066;
        }
        label.bui-radios-label input[type="radio"]:disabled + .bui-radios{
            background-color: #e8e8e8;
            border:1px solid #979797;
        }
        label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{
            background-color: #c1c1c1;
        }
        /*自定义radio的过渡效果*/
        label.bui-radios-label.bui-radios-anim .bui-radios{
            -webkit-transition:background-color ease-out .5s;
            transition:background-color ease-out .5s;
        }
    </style>
</head>
<body>
    <h4>有简单的背景动画：</h4>
    <label class="bui-radios-label bui-radios-anim">
        <input type="radio" name="sex"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label bui-radios-anim">
        <input type="radio" name="sex"><i class="bui-radios"></i>女
    </label>
    <h4>无背景动画：</h4>
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>女
    </label>
    <h4>禁用状态（disabled）：</h4>
    <label class="bui-radios-label">
        <input type="radio" name="sex" disabled="disabled"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex" disabled="" checked=""><i class="bui-radios"></i>女
    </label>
</body>
</html>

2.效果展示

这里写图片描述

二、美化多选框（checkbox）

1.具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化checkbox</title>
    <style>
        label.bui-checkbox-label input[type="checkbox"]{
            visibility: hidden;
            opacity: 0;
        }
        label.bui-checkbox-label .bui-checkbox{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            border: 1px solid #ddd;
            background-color: #fff;
            vertical-align: -2px;
            margin-right: 5px;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox:after{
            position: absolute;
            content: "";
            width:8px;
            height: 4px;
            border-left:2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translate(-50%,-50%);
            /*top:50%;*/
            left:50%;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox {
            background-color: #00B066;
        }
        label.bui-checkbox-label input[type="checkbox"]:disabled + .bui-checkbox{
            background-color: #e8e8e8;
            border:1px solid #979797;
        }
        label.bui-checkbox-label input[type="checkbox"]:disabled:checked + .bui-checkbox:after{
            border-color: #000;
        }
        label.bui-checkbox-label.bui-checkbox-anim .bui-checkbox{
            -webkit-transition:background-color ease-in-out .3s;
            transition:background-color ease-in-out .3s;
        }
    </style>
</head>
<body>
    <h4>有简单的背景动画：</h4>
    <label class="bui-checkbox-label bui-checkbox-anim">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label bui-checkbox-anim">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
    </label>
    <h4>无背景动画：</h4>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
    </label>
    <h4>禁用状态（disabled）：</h4>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex" disabled="disabled"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex" disabled="" checked=""><i class="bui-checkbox"></i>女
    </label>
</body>
</html>

2.效果展示
这里写图片描述

monkeyfly007

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
自定义单选按钮（radio）和自定义复选框（checkbox）

Write By Monkeyfly以下内容均为原创，如需转载请注明出处。前提在项目中经常会遇到样式美观的radio或者checkbox，经过我的观察，发现有两种实现方法：利用点击时切换不同的图片代替radio或者checkbox，来实现选中或者取消时的样式变换效果。利用label标签的特性以及i元素搭配伪元素（:before或者:after）进行模拟。下面主要说第二种实...
复制链接

扫一扫