input结合label对checkbox进行美化以及checkbox对应选中操作

戏码人参

已于 2022-08-11 15:07:35 修改

阅读量478

点赞数

分类专栏：前端 css3 文章标签： css css3 html 前端

于 2022-08-11 12:05:11 首次发布

本文链接：https://blog.csdn.net/qq_42023860/article/details/126282709

版权

本文介绍如何利用CSS3对HTML的checkbox进行样式美化，结合label元素实现更好的用户体验，包括checkbox的选中状态操作和交互设计。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input结合label对checkbox进行美化</title>
    <style>
        /*
         思路: 在原控件外模拟效果，隐藏原生控件。
               用label包裹input，可以实现点击label,使input 选中或者取消选中。
        */
        :root{
     
            --main_color: #1f82ff;
            --main_font:#fff;
        }
        label{
     
            -webkit-tap-highlight-color: rgba(255,0,0,0);/*设置label标签透明*/
        }
        .title{
     
            height: 50px;background: var(--main_color);text-align: center;color: var(--main_font);line-height: 50px;
        }
        .checkbox-input-box{
     
            display: block;margin: 20px 0px;border: 1px solid #CCCCCC;padding: 20px 0px;
        }
        .checkbox-input{
     
            display: none;
        }
        .replace-checkbox-span {
     
            display: inline-block;background-color: var(--main_font);border-radius: 100%;border: 1px solid #ccc;
            position: relative;width: 16px;height: 16px;vertical-align: middle;
        }
        .replace-checkbox-span:after {
     
            border: 2px solid transparent;border-left: 0;border-top: 0;content: " ";
            top: 2px;left: 5px;position: absolute;width: 4px;height: 7px;
            transform: rotate(45deg) scale(0);-webkit-transform: rotate(45deg) scale(0);
            transition: -webkit-transform .3s;-webkit-transition: -webkit-transform .3s;
            tra