如何用input checkbox实现按钮开关样式？

最新推荐文章于 2024-04-16 10:07:01 发布

qq_45723057

最新推荐文章于 2024-04-16 10:07:01 发布

阅读量1.4k

点赞数 2

文章标签： input checkbox实现按钮开关样式

本文链接：https://blog.youkuaiyun.com/qq_45723057/article/details/102983673

版权

本文详细介绍了如何利用HTML的input checkbox清除默认样式，并通过CSS实现按钮开关的效果。主要步骤包括设置基本样式，定义未选中和选中时的样式变化，以及结合伪类完成点击交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input checkbox实现按钮开关样式

1.给input清空默认样式和设置按钮基本样式(class=“switch”)

        input[type=checkbox].switch{
   

            outline: none;									清除点击默认边框为蓝色

            appearance: none;							清除默认边框样式

            -webkit-appearance: none;			兼容		谷歌

            -moz-appearance: none;				兼容  火狐

            position: relative;				

            width: 2.6rem;								宽度

            height: 1.52rem;							高度	

            border-radius: 50px;			

            border: 1px solid #ccc;

            background-color: #ccc;

        }

在这里插入图片描述

2.设置input按钮开关点击前样式(小圆球样式，伪类)

        input[type=checkbox].switch::after{
   

            content: '';

            display: inline-block;

            width: 1.4rem;

            height: 1.4rem;

            border-radius: 50%;

            background-color: #fff

最低0.47元/天解锁文章