纯CSS实现input输入框的checkbox开关样式

最新推荐文章于 2024-06-29 16:52:06 发布
最新推荐文章于 2024-06-29 16:52:06 发布
阅读量457 收藏 1
点赞数
分类专栏： CSS HTML 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39535807/article/details/105714228
版权
HTML 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏

 

<style>
    .uiswitch {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        -webkit-appearance: none;

        -moz-appearance: none;

        -ms-appearance: none;

        -o-appearance: none;

        appearance: none;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        height: 31px;

        width: 51px;

        position: relative;

        border-radius: 16px;

        cursor: pointer;

        outline: 0;

        z-index: 0;

        margin: 0;

        padding: 0;

        border: none;

        background-color: #e5e5e5;

        -webkit-transition-duration: 600ms;

        -moz-transition-duration: 600ms;

        transition-duration: 600ms;

        -webkit-transition-timing-function: ease-in-out;

        -moz-transition-timing-function: ease-in-out;

        transition-timing-function: ease-in-out;

        -webkit-touch-callout: none;

        -webkit-text-size-adjust: none;

        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        -webkit-user-select: none;

    }

    .uiswitch::before {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        height: 27px;

        width: 47px;

        content: ' ';

        position: absolute;

        left: 2px;

        top: 2px;

        background-color: #ffffff;

        border-radius: 16px;

        z-index: 1;

        -webkit-transition-duration: 300ms;

        -moz-transition-duration: 300ms;

        transition-duration: 300ms;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        transform: scale(1);

    }

    .uiswitch::after {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        height: 27px;

        width: 27px;

        content: ' ';

        position: absolute;

        border-radius: 27px;

        background: #ffffff;

        z-index: 2;

        top: 2px;

        left: 2px;

        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14);

        -webkit-transition: -webkit-transform 300ms, width 280ms;

        -moz-transition: -moz-transform 300ms, width 280ms;

        transition: transform 300ms, width 280ms;

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

        -webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);

        -moz-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);

        transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);

    }

    .uiswitch:checked {

        background-color: #4CD964;

        background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);

        background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);

    }

    .uiswitch:checked::after {

        -webkit-transform: translate3d(16px, 0, 0);

        -moz-transform: translate3d(16px, 0, 0);

        -ms-transform: translate3d(16px, 0, 0);

        -o-transform: translate3d(16px, 0, 0);

        transform: translate3d(16px, 0, 0);

        right: 18px;

        left: inherit;

    }

    .uiswitch:active::after {

        width: 35px;

    }

    .uiswitch:checked::before, .uiswitch:active::before {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        -ms-transform: scale(0);

        -o-transform: scale(0);

        transform: scale(0);

    }

    .uiswitch:disabled {

        opacity: 0.5;

        cursor: default;

        -webkit-transition: none;

        -moz-transition: none;

        transition: none;

    }

    .uiswitch:disabled:active::before, .uiswitch:disabled:active::after, .uiswitch:disabled:checked:active::before, .uiswitch:disabled:checked::before {

        width: 27px;

        -webkit-transition: none;

        -moz-transition: none;

        transition: none;

    }

    .uiswitch:disabled:active::before {

        height: 27px;

        width: 41px;

        -webkit-transform: translate3d(6px, 0, 0);

        -moz-transform: translate3d(6px, 0, 0);

        -ms-transform: translate3d(6px, 0, 0);

        -o-transform: translate3d(6px, 0, 0);

        transform: translate3d(6px, 0, 0);

    }

    .uiswitch:disabled:checked:active::before {

        height: 27px;

        width: 27px;

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        -ms-transform: scale(0);

        -o-transform: scale(0);

        transform: scale(0);

    }

    .uiswitch {

        background-color: #e5e5e5;

    }

    .uiswitch::before {

        background-color: #ffffff;

    }

    .uiswitch::after {

        background: #ffffff;

    }

    .uiswitch:checked {

        background-color: #4CD964;

        background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);

        background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);

    }

    body {

        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

        background-color: #ffffff;

    }

    p {

        font-size: 18px;

        font-weight: 300;

    }

    pre, code {

        font-family: Monaco, Menlo, "Courier New", Courier, monospace;

        font-size: 13px;

    }

    pre {

        text-align: left;

    }

    pre {

        background-color: #fbfbfb;

        border: 1px solid #eee;

        padding: .6em;

        display: inline-block;

        border-radius: 3px;

    }

    .wrapper {

        width: 90%;

        margin: 0 auto;

        text-align: center;

    }

    h1 {

        font-weight: 200;

        text-align: center;

        margin: 2em;

    }

    .fields__item {

        display: inline-block;

        margin-right: 1.875em;

        text-align: center;

    }

    h6 {

        font-size: 12px;

        font-weight: 500;

        text-transform: uppercase;

        letter-spacing: .5px;

        color: #aaa;

        margin: 1em;

    }

    .section {

        margin: 2em auto;

    }

    .custom {

        background-color: #eadcbc;

    }

    .custom::before {

        background-color: #f7f2e5;

    }

    .custom::after {

        background: #fff3a6;

    }

    .custom:checked {

        background-color: #ffca3f;

        background-image: -webkit-linear-gradient(-90deg, #ffca3f 0%, #feca40 100%);

        background-image: linear-gradient(-180deg, #ffca3f 0%, #feca40 100%);

    }

    .my-switch {

        border-radius: 4px;

    }

    .my-switch::before {

        border-radius: 2px;

    }

    .my-switch::after {

        border-radius: 1px;

    }

    .my-switch:checked {

        background: hotpink;

    }

    .my-switch:checked::after {

        background-color: #333;

    }

</style>

使用说明

只需要使用一行html代码，添加uiswitch类名。

可以设置默认值，比如默认选择、默认不可用，那么只需在这行html代码里添加一个属性如checked，disabled即可。

例子：

 <input class="uiswitch" name ="xxx" type="checkbox" checked="true">

iCheney！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css表单单选框、复选框、上传文字和隐藏字段、下拉菜单、文本域、字段集
YY的博客
09-20 3899
css表单单选框、复选框、上传文字和隐藏字段、下拉菜单、文本域、字段集
input type=‘checkbox’ 第一个单选其他的多选
weixin_43121104的博客
11-12 1459
HTML代码 &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" name="b"&gt;无&lt;/td&gt;&lt;td&gt;内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&
css修改input框默认样式（checkbox）
zhudingfengshen的博客
05-29 3524
项目场景： 可以看到这是checbox，底图为默认样式，但是是单选框的逻辑，开始打算用radio实现样式修改不过遇到了很多困难，还是选择了checkbox实现单选逻辑 解决方案： 替换内部对号为icon及修改内部填充色等 input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; /* 未选中时的背景颜色 */ width: 100
使用css修改input框中checkbox的样式
热门推荐
天涯的博客
04-19 17万+
概述    在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对...
css 显示放上去打开输入框
最新发布
qq_33240556的博客
06-29 172
请注意，上面的代码示例是基于静态CSS的实现方式。如果你需要更复杂的交互逻辑，比如动画效果、条件显示等，可能还需要借助JavaScript来实现。伪类和一些基本的布局技巧来完成。下面是一个简单的示例，演示如何在鼠标悬停在一个按钮或者某个容器上时，显示一个原本隐藏的输入框。在CSS中，若要实现当鼠标悬停在一个元素上时显示一个输入框，你可以通过结合CSS的。为了使显示过程更加平滑自然，还可以添加一个CSS过渡效果（类的元素上时（这可以是包含按钮的任何容器），与之关联的输入框（在这个例子中，当用户的鼠标悬停在。
css：默认的checkbox、input、radio太丑了？手把手教你改变使用纯css3改写的带动画的默认样式
sunshine940326的博客
05-10 1万+
项目的github地址为： https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客 最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样
CSS实现input的checkbox的样式
m0_58362792的博客
11-16 1050
1，label和input的隐式关联 就是label标签把input标签包裹起来就可以了， HTML <label> <input type="checkbox" name="inp1" id=""> <span>inp1</span> </label> CSS <style> * { margin: 0; padding: 0; } span::.
CSS控制输入框input悬停交互样式
管子（zero）的杂乱空间
10-05 1719
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
控制input的CSS但不影响CheckBox以及Radio的样式
09-05
使用CSS3的属性选择器，如`input[type="checkbox"]`和`input[type="radio"]`，可以实现对特定类型元素的精细化控制，同时保持良好的浏览器兼容性。而对于老旧的IE浏览器，可以考虑使用`expression`属性，但要意识到...
css+jquery带checkbox的输入框可模糊查询
04-24
在网页设计中，实现“CSS+jQuery带checkbox的输入框可模糊查询”功能是一项常见的交互需求，它能够提升用户体验，使用户能快速找到并选择所需信息。以下将详细讲解这个功能涉及的技术点。 首先，CSS（Cascading ...
Bootstrap CSS组件之输入框组
08-31
Bootstrap CSS组件中的输入框组（input-group）是一个强大的工具，用于构建复杂的表单布局和界面。这个组件允许您将输入字段、前缀、后缀、按钮或其他元素组合在一起，以提供更加直观和用户友好的交互体验。下面我们...
纯CSS3实现发光开关切换按钮效果源码.zip
11-20
本资源“纯CSS3实现发光开关切换按钮效果源码.zip”提供了一种使用CSS3来创建具有动态发光效果的开关切换按钮的方法。下面我们将深入探讨这个主题，了解如何仅用CSS3实现这一功能。 首先，CSS3新增了许多特性，使得...
纯CSS实现交互式注册表单代码.zip
11-09
纯CSS实现意味着不依赖JavaScript，所有交互逻辑通过CSS样式控制。例如，可以使用`required`属性进行客户端验证，确保必填字段未被忽略；使用`pattern`属性定义输入格式，如邮箱或电话号码；通过`input[type=...
复选框，当选中一个时其他为禁选
Mr.H_小海
11-04 1369
<li class="family" id="family"> <p >家庭情况：</p> <span><input type="checkbox" name="family" value="独生子女" onclick="Ck(this);" id="oneChild">独生子女</...
HTML&CSS基础学习笔记1.23-input标签的单选与多选
chenjin19961001的博客
08-17 350
单选和多选 单选框和多选框是用<input>标签来实现的。 <input>标签的type属性值为"checkbox"时，表示多选框，为"radio"时表示单选框。 一个多选列表一般具有2个或两个以上的多选框,它们都具有属性name，且属性name值相同，当这些多选...
如何用一个＜input＞元素来写出开关的效果
sfyjknvcx的博客
01-21 1219
这里的“开关”指的是移动端的开关。因为移动端我们要用手指来操作，而手指比鼠标的面积大得多，意味着点击的精确度会小得多，所以仍旧使用“复选框(<input type="checkbox">)”就不是很方便了，使用“开关”更方便——它看起来够大，容易操作，而且能从颜色来判断出状，容易观察。 移动端的开关大概长这样（图片来自网络）—— 可以看到，开关有一个背景框和一个小圆点，不同状态下具有不同的颜色。 最近我在一门课上看到了用CSS3+<input>做出开关效果的方法，我在这里教
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2032
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
input checkbox 禁止选中/修改
weixin_30528371的博客
06-08 3174
input checkbox 禁止选中 <input type="checkbox" onclick="return false;" /> input checkbox 选中状态禁止修改 <input type="checkbox" onclick="return false;"checked="checked" /> 转载于:https://ww...
html css开关按钮样式
05-18
/* 开关按钮输入框样式 */ .switch input { opacity: 0; width: 0; height: 0; } /* 开关按钮圆形样式 */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值