css开关样式组件

最新推荐文章于 2024-05-18 10:01:50 发布
最新推荐文章于 2024-05-18 10:01:50 发布
阅读量328 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44239383/article/details/102984317
版权

css页

/* 必须input为CheckBox,class添加switch才能实现以下效果 */
 input[type="checkbox"].wl-switch{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 2.8rem;
    height: 1.4rem;
    border:1px solid #ccc;
    background-color: #ccc;
    border-radius: 0.7rem;
    outline: none;
 }
 input[type="checkbox"].wl-switch::after{
     content: "";
     display: inline-block;
     width: 1.4rem;
     height: 1.39rem;
     border-radius: 50%;
     background-color: #fff;
     box-shadow: 0 0 2px #999;
     transition: left 0.1s;
     position: absolute;
     top: -1px;
     left:0;    
 }
 input[type="checkbox"].wl-switch:checked{
     background-color: #32ba58;
 }
 /* 
    1.默认为不被选中状态
    input[type="checkbox"] 被选中时，伪元素显示下面样式，定位发生变化
 */
 input[type="checkbox"].wl-switch:checked::after{
     position: absolute;
     left:1.4rem;
     top: -1px;
 }
/* 状态 */
 input[type="checkbox"]:checked.wl-switch.wl-switch-info{
    background-color: #409eff;
 }
 input[type="checkbox"]:checked.wl-switch.wl-switch-danger{
    background-color: rgb(255, 73, 73);
 }
 input[type="checkbox"]:checked.wl-switch.wl-switch-warm{
    background-color: hsl(51,93%,54%);
 }
 input[type="checkbox"]:checked.wl-switch.wl-switch-primary{
     background-color: #409eff;
 }
 input[type="checkbox"].wl-switch.wl-switch-primary{
    background-color: rgb(255, 73, 73);
 }

html页

<body>
   <input type="checkbox" class="wl-switch">
   <input type="text" class="wl-switch">
   <input type="checkbox" class="wl-switch wl-switch-info">
   <input type="checkbox" class="wl-switch wl-switch-warm">
   <input type="checkbox" class="wl-switch wl-switch-danger">
   <input type="checkbox" class="wl-switch wl-switch-primary">
</body>

运行图在这里插入图片描述

裤兜丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮简洁的css开关样式
12-12
一个漂亮简洁的css开关样式，<input type="checkbox" value="1" name="check" class="lcs_check" 'checked';> autocomplete="off"/>
vue自定义switch开关组件,实现样式可自行更改
10-16
在本文中，我们将深入探讨如何在Vue.js中创建一个自定义的Switch开关组件，使其样式可以根据需求进行个性化定制。Vue自定义Switch组件允许开发者灵活地调整开关的外观和行为，以满足不同项目的需求。 首先，我们来...
CSS开关样式
xuexilangren1的博客
08-26 1364
CSS实现开关样式 需求 通过CSS代码实现类似于ui库中的开关样式 思路 通过label标签加上checkbox的checked伪类和标签的伪元素before来实现样式 如果上面的几个概念不熟悉的话可以先去了解一下 代码 <div class="body"> <input id="turn" type="checkbox" /><label for="turn"></label> </div> <style> labe
推荐项目：纯CSS切换开关(CSS Toggle Switch)
最新发布
gitblog_00074的博客
05-18 464
推荐项目：纯CSS切换开关(CSS Toggle Switch) 项目地址:https://gitcode.com/ghinda/css-toggle-switch 在这个数字化时代，我们经常需要在用户界面中添加易于操作的切换按钮。CSS Toggle Switch 是一个由 Ionuț Colceriu 创建并维护的开源项目，它提供了一套无需JavaScript，仅依赖CSS实现的可访问性极强的...
css实现开关样式
Schrodinge的博客
11-28 565
HTML代码 <label class="switch"> <input type="checkbox" checked /> <div class="slider round"></div> </label> 用样式实现点击开关开启关闭效果 // 开关 .switch { position: relative...
CSS实现开关按钮样式
spring_007_999的博客
04-23 878
css开关样式
纯CSS3开关样式的自定义单选框按钮
12-23
在本文中，我们将深入探讨如何使用纯CSS3创建具有开关样式的自定义单选框按钮。这种方法对于提升网页设计的用户体验和视觉吸引力至关重要，尤其是在现代Web前端开发中。CSS3的强大功能使得我们可以抛弃传统的HTML...
如何用css3实现switch组件开关的方法
01-19
本文介绍了用css3实现switch组件的方法，分享给大家，具体如下： 基于表单的checkbox 效果图 原理 checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, ...
基于Bootstrap3的纯CSS滑动开关按钮组件
12-13
TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript，它的HTML结构和原生的Bootstrap checkbox组件结构基本相同，使用起来非常方便。它还提供了多种主题样式：IOS样式和...
012国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
在本资源"012国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip"中，包含了构建现代跨平台网站所需的关键技术元素，主要聚焦于HTML、CSS以及JavaScript这三个核心Web开发语言。...
css开关样式-仿ios
weixin_43418331的博客
05-16 232
css开关样式-仿IOS 预览 代码 css <style> label { display: block; height: 24px; width: 50px; border-radius: 1em; border: 0.1px solid gainsboro; transition: background-color 1s; box-shadow: 0px 0px 2px #888888 inset; } #turn {
CSS开关样式 实现加入推荐和取消推荐
贾贾贾贾念文的博客丶
05-31 253
id="div1" [#if brand.isHot== "true"] class="open1"[#else]class="close1"[/#if]> id="div2" idVal="${brand.id}" [#if brand.isHot== "true"] class="open2"[#else]class="close2"[/#if]> 以上代码解释为，如果brand.i
开关样式.css
ououyangxiaolin的博客
11-11 143
input[type=checkbox].switch{ outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 2.8rem; height: 1.48rem; border: 1px solid #ccc; background-co...
纯css实现简易菜单开关样式（平行线相交）样式切换
merlinskr的博客
09-27 406
css部分，绝对定位把等号放到想要的位置，margin-top：给一个间距（实现平行线相交动效需要），当:hover时，把第一条平行线向下旋转45°，第二条平行线移除边距，同时向上旋转45°，实现平行线相交效果。transition 给个过度效果，让动效更加丝滑！！ ！！！就非常的简单
CSS开关按钮
qq_35728999的博客
05-14 2514
使用CSS制作开关，最近制作后台页面时，发现普通的多选框过于单调，而使用开关按钮要引入Element-UI之类的东西，如果单独要使用这一个按钮，引入库代价比较大，没有必要为了这一个效果引入库，所以想使用HTML+CSS修改默认的多选框按钮。
利用CSS3实现开关样式
ma125120的博客
10-28 672
开关组件开关组件有开和关两个状态，所以可以使用checkbox元素来实现。只需使用border-radius,checked选择器,CSS3的过渡动画即可制作一个美观的开关按钮。下图分别为关闭状态的样式和打开状态的样式： 首先，来分析一下这个组件的大概组成部分：分别为底层的圆角矩形框，圆形的指示球。圆角的矩形框的圆角样式就是border-radius的应用，当它的值等于它的高度时，左右的边框就会变
一个简单css+js的开关组件
weixin_30273175的博客
07-05 258
一个简单的开关组件 依赖：jquery.js CSS .choose-btn { display: none; } .choose-label { box-shadow: #b1b1b1 0px 0px 0px 1px; width: 30px; height: 16px; display: inline-block; border-radius: 16px; posit...
【转载+整理】IE-CSS3 – 让 IE6,7,8 支持CSS3中的圆角、阴影
ManGo0317的专栏
04-21 296
大家知道IE 6,7,8不支持CSS3中新加属性，老外写了一个htc，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）   IE-CSS3 是个能令 Internet Explorer 不完整地支持几个常用的 CSS3 属性的小 script。它利用了 Internet Explor...
element-plus 开关组件
09-28
要将文字描述显示在开关组件上，可以通过调整样式来实现。在给开关组件的父元素添加一个类名（例如"switchStyle"），然后在样式中设置该类名下的`.el-switch__label`的`position`属性为`absolute`，并将`.el-switch_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值