input type="checkbox" 样式美化

最新推荐文章于 2024-03-29 17:47:26 发布
最新推荐文章于 2024-03-29 17:47:26 发布
阅读量564 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37514029/article/details/97374996
版权

 

代码结果展示 
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        .selected_remind_input input[type="checkbox"] {
            -webkit-appearance: none;
        }

        .selected_remind_input input[type="checkbox"]:checked+label,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label {
            background-color: #e0e0e0;
            border-radius: 24px;
            cursor: pointer;
            display: inline-block;
            height: 20px;
            position: relative;
            text-indent: -9999px;
            width: 40px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
            background-color: #fff;
            border-radius: 20px;
            content: " ";
            height: 15px;
            left: 2px;
            position: absolute;
            top: 2px;
            width: 15px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label {
            background-color: #4d87ea;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after {
            left: 22px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label {
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
            -webkit-transition: left 0.3s;
            transition: left 0.3s;
        }
    </style>

</head>
<body>
   <div class="selected_remind_input  ">
        <input id="example0" type="checkbox" checked>
        <label for="example0">Check</label>
    </div>
</body>
</html>

 

可乐M
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div仿checkbox表单样式美化及功能有素材
09-25
在描述中提到的“div仿checkbox表单样式美化”，实际上是指用`div`元素来模拟`checkbox`的外观，并使用CSS来定制样式。这通常涉及到以下几个步骤： 1. **HTML 结构**：创建一个`div`元素作为`checkbox`的容器，以及...
input[type=“checkbox“] 美化CheckBox
fastrack_15233866884的博客
03-22 203
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes cb_after { from { opacity: 0; height: 0; } to { opacity: 1; he...
checkbox美化
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
11-19 1931
传统的checkbox表单元素是不好看的，而且每个浏览器表现出来的样式还不一样，很多时候我们会借助一些表单美化的插件实现类似开关切换的效果，有些是用 js+css 实现的，而有些则是纯CSS实现的，我们更应该感兴趣的是后者，今天我们就来一步一步实现一个CheckBox美化的效果 开始之前我们先搞清楚，要给CheckBox 的样式好像不太可行，所以需要借助label的for来间接触发 CheckB...
修改inputc复选框checkbox背景色
最新发布
m0_62782752的博客
03-29 300
【代码】修改inputc复选框checkbox背景色。
你见过吗？9款超炫的复选框（Checkbox）效果
weixin_34124651的博客
04-21 341
　　复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。 　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。     　　前面三款效果都是灵感来自...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
weixin_30607125的博客
06-03 1584
这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。使用方法HTML结构该复选框美化效果的HTML结构如下：Check?当用户点击label的时候，实际上是点击了#checkbox-1。CSS样式通过label和checkbox，我们可以将checkbox...
总结：如何修改美化radio、checkbox的默认样式
weixin_33852020的博客
11-30 1237
现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。 原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是...
简单 checkbox 样式美化
夜听雪的博客
03-03 656
HTML： <label style="position: relative;"> <input type="checkbox" style="display: none;"> <span class="checkbtn"></span> <span>选项一</span> </label&gt...
HTML的checkbox和radio样式美化的简单实例
12-14
HTML的checkbox和radio样式美化的简单实例 checkbox： XML/HTML Code复制内容到剪贴板 <style type="text/css">  input[type="checkbox"] { display: none; } input[type="checkbox"] + ...
jQuery实现自定义checkbox和radio样式
10-23
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术，它可以帮助开发者摆脱浏览器默认样式，创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先，我们要理解...
控制input的CSS但不影响CheckBox以及Radio的样式
09-05
在一些Web界面,有时候为了方便会写一个全局的input样式,这样所有的样式会立刻变化，如果能更好的区分checkbox等呢。
checkbox样式美化 修改复选框样式
叶落无痕的博客
06-13 1265
input[type="checkbox"] { width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; position: relative; ...
表单元素——checkbox样式美化
weixin_34240520的博客
10-27 207
一、背景  设计狮童鞋总是会设计各种高大上的效果图，比如下面这个土豪金的效果。  该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框，打钩时是一个金色的对勾。接下来说说怎样实现该效果。 二、解决方法 1、纯css解决方法  在css3 选择器（三）一文中介绍过一个选择器【:checked】选择器。 单选按钮和复选按钮都有选中和未选中状态。要设置这两个按钮默认样式稍微复杂...
自定义 input[type="checkbox"]的样式
Bhys518的博客
12-15 959
自定义 input[type=“checkbox”]的样式 对复选框自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对复选框设置样式，那么这个伪类并不实用，因为没有多少样式能够对复选框起作用。不过，倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label...
css美化checkbox样式,置灰样式，超简洁
chiwen_wen的博客
05-17 7688
css美化checkbox样式 效果图 样式可以自由定制，不用辛苦写一堆css html <div> <input type="checkbox" class="toggle"> <span>复选框1<span> </div> <div> <input type="checkbox" checked c...
纯css美化单选与复选框
软件开发
09-07 603
【代码】纯css美化单选与复选框。
CSS 美化checkbox
BangD的博客
09-15 1025
CSS 美化checkbox 表单
035：vue项目中 radio和checkbox美化方法
大剑师兰特的GIS世界
09-16 433
在vue项目开发中，经常会用到radio和checkbox， 有时候原有的丑陋样式不能满足产品和UI的法眼，就需要更换一种表达方式。在本文中，我们通过覆盖等技术手段实现了radio和checkbox的样式美化。
css3实现checkbo美化
hsany330的专栏
08-10 331
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta content="width=device-width, initial-scale=1.0, .
用css美化以下这个注册页面 <div> <h3 class="title">注册</h3> <form method="post"> <div> <input type="email" v-model="email" id="email" placeholder="请输入邮箱账号"> </div> <div> <input type="password" v-model="password" id="password" placeholder="设置密码"> </div> <div> <input type="password" v-model="passwordRepeat" id="passwordRepeat" placeholder="确认密码"> </div> <div> <input type="text" v-model="tel" id="tel" placeholder="请输入手机号"> </div> </form> <div> <input id="reader-me" type="checkbox" v-model="checked"> 点击表示您同意商城《服务协议》 </div> <div> <input type="submit" name="" :disabled="!checked" @click="mr_verify" value="注册"> </div> </div>
06-09
好的，这里是一个简单的样式设计，你可以根据需要进行修改： ``` <style> body { background-color: #f2f2f2; } .title { text-align: center; font-size: 24px; margin-bottom: 20px; } form { width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } input { display: block; width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); } input[type="submit"] { background-color: #ff6700; color: #fff; font-size: 18px; font-weight: bold; cursor: pointer; } input[type="submit"]:hover { background-color: #ff8c00; } #reader-me { margin-right: 10px; vertical-align: middle; } #reader-me + label { display: inline-block; vertical-align: middle; } </style> <div> <h3 class="title">注册</h3> <form method="post"> <div> <input type="email" v-model="email" id="email" placeholder="请输入邮箱账号"> </div> <div> <input type="password" v-model="password" id="password" placeholder="设置密码"> </div> <div> <input type="password" v-model="passwordRepeat" id="passwordRepeat" placeholder="确认密码"> </div> <div> <input type="text" v-model="tel" id="tel" placeholder="请输入手机号"> </div> <div> <input id="reader-me" type="checkbox" v-model="checked"> <label for="reader-me">点击表示您同意商城《服务协议》</label> </div> <div> <input type="submit" name="" :disabled="!checked" @click="mr_verify" value="注册"> </div> </form> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值