自定义百里半同款checkbox框

最新推荐文章于 2022-11-23 12:28:49 发布
最新推荐文章于 2022-11-23 12:28:49 发布
阅读量173 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45637785/article/details/103211000
版权
本文介绍如何使用CSS自定义checkbox，通过设置clip和position去除默认样式，利用伪类添加初始样式，并调整margin实现居中，再通过:checked伪类改变选中状态的背景色。最后通过调整对勾的位置和颜色完成定制。
摘要由CSDN通过智能技术生成
首先利用clip: rect(0,0,0,0);position: absolute;这两句将原始的checkbox框样式去除。

去除前
在这里插入图片描述
去除后
在这里插入图片描述
利用伪类样式添加自定义的初始checkbox框代码如下

label{
			float: left;
		}
		input[type=checkbox]+label::before{
			content: "";
			width: 14px;
			height: 14px;
			border: #DCDFE6 1px solid;
			background-color: #EDF2FC;
			float: left;
			display: block;
		}

在这里插入图片描述
是不是发现有一点歪，只要加上margin: 4px 5px;这句调整margin就好啦
调整后
在这里插入图片描述
加上input[type=checkbox]:checked+labe

最低0.47元/天 解锁文章
qq_45637785
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中实现元素隐藏的几种方法
simple_Xsg的博客
04-09 2万+
一、display:none; display翻译成中文是显示、展览的意思；将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。 二、visibility:hidden; visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览
Android开发之自定义CheckBox
09-01
在Android开发中，自定义控件是一个常见的需求，特别是对于UI元素如CheckBox，有时需要根据设计需求进行定制化。本文将详细介绍如何自定义一个CheckBox，包括处理`wrap_content`问题和实现动画效果。 首先，从描述...
CSS重点概念精讲
weixin_52884694的博客
10-12 601
❝ 欲望越大，我们需要的奔跑速度就越快；而筋疲力尽之时，便是我们幸福感滑坡之时 ❞ 大家好，我是「柒八九」。 今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。 该系列的文章，大部分都是前面文章的知识点汇总，但是也不乏参考其他优秀文章。不过，大家可以放心，里面的代码和知识点，都有迹可循。 好了，天不早了，干点正事哇。 你能所学到的知识点 ❝ 选择器流、元素盒模型元素超出宽度...处理元素隐藏层叠规则块级格式化上下文元素居中fle
css3 clip:rect(top, right, bottom, left)学习
黄彪博客
04-09 801
文章目录文章参考定义和用法说明API使用案例 文章参考 CSS clip:rect矩形剪裁功能及一些应用介绍 css ：clip rect 正确的使用方法 定义和用法 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 说明 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，...
一些前端知识
qq_51070956的博客
11-23 462
添加了top: 0 和 bottom: 0相当告诉absolute元素，让它的高度等于relative元素的高度，垂直方向（block direction）是上下重叠的。如果需要添加一个覆盖浏览器全屏的界面，modal窗口等，使用方案2会比方案1更好一些，尤其是在移动端，可以避免可能出现的浏览器网址输入框带来的一些问题。bottom: 0;和 设置height:100% 差不多，都是自适应高度。
HTML+CSS教程（十一）补充css中clip:rect用法
qq_43434300的博客
12-04 1145
css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果. top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的. 经典案例: <!DOCTYPE html> <html> <head> <meta ch
C# WinForm 自定义CheckBox
04-01
5. **使用自定义CheckBox**: 在其他WinForms窗体中，我们可以像使用普通CheckBox一样添加并使用这个自定义控件。只需在工具箱中右键点击，选择"添加项"，然后找到我们刚刚创建的CheckBoxEx控件。 通过以上步骤，...
WPF 自定义CheckBox样式
06-25
自定义CheckBox的第一步是选择一个合适的字体图标库。有许多免费的字体图标库，如Material Design Icons、Font Awesome、Glyphicons等，这些库包含了大量矢量图标，可以方便地用作CheckBox的图形元素。 接下来，...
Qt 自定义Checkbox和QColorDialog 颜色调试框委托
07-30
Qt 自定义Checkbox和QColorDialog 颜色调试框委托 Qt 自定义Checkbox和QColorDialog 颜色调试框委托 Qt 自定义Checkbox和QColorDialog 颜色调试框委托
去掉checkbox边框的方法(css)
09-25
标题“去掉checkbox边框的方法(css)”提示我们，我们将重点讨论如何通过CSS技术来隐藏或移除HTML中的复选框（checkbox）的边框。 描述中提到的“用clip裁掉边框，就看不到边框了”，这是一种巧妙的解决方案，但并不...
程序人生：行百里半九十
02-04
到了一定年纪，每个人不太一样，一般是18－30岁以后，有很多人是不可改变的，他的本我已经太强，根本就不可能穿上对方的鞋子走路，站在对方的角度去思考，如果你觉得自己还能改变的话，请保持并继续往下看，否则就不用在这里浪费宝贵的享受生命的时间。在走进我们大陆这个光怪陆离的社会漩涡之后，如果还能有百分之一的人保持清醒，这也必然意味着痛苦，那他们就是未来的希望。做纯粹的《麦田的守望者》总是痛苦的，如果你也能适应并理解尘世的虚幻和不平，你就会活的轻松许多，毕竟我们的社会还是在进步的。可能这里没有多少人有我的一些经历，我曾经做过半天的医生，更有幸目睹了一个新生命的诞生喜剧。伴随婴儿哭声的是母亲剖腹而来的满身
css clip:rect剪裁问题
qq_40663497的博客
11-08 1083
css的clip属性，有剪裁的效果，但是一般我很少用，但是今天在项目中碰到了，那就具体说说clip剪裁功能；为什么一般很少用clip呢，因为有其他的方法代替剪裁，例如我们经常用的over-flow:hidden;这种生硬的剪裁（或者说是隐藏超出部分）; 下面来说一说clip： 1、首先，如果先有"overflow：visible"，clip属性不起作用。 2、clip配合position:a...
自定义单选按钮
CSS 初学者指南
06-24 112
#foo:checked::before, input[type="checkbox"] { position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); } #foo:checked, input[type="checkbox"] + label::before { content: url('che...
css ：clip rect 正确的使用方法
weixin_30713953的博客
12-17 558
CSS clip 是一个极少使用，但又确实存在的属性。 而且，它其实在CSS2时代就有了。 w3school 上有这么一句话： clip 属性剪裁绝对定位元素。 也就是说，只有 position:absolute 的时候才是生效的。 img { position:absolute; clip:rect(0px,60px,200px,0px); } ...
php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
weixin_39540834的博客
03-10 400
在网页中，通常设计师们为了凸显自己的产品主题，总会让文字或者加点特效，比如使文字不停的闪动，或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外，还有哪些方法可以实现这样的功能特效呢？对于略懂代码的朋友们来说，我们都知道css中文字体样式是有很多种的，例如倾斜、加粗等等。那么这里就给大家介绍一下，如何用css代码做出文字闪动效果，本篇有两种闪动方式可供大家参考。一、css字体...
clip 学习
不破小子
05-27 755
clip:css2的一个属性，用来裁剪绝定位的元素，用法为clip:rect(0px,100px,200px,0px);第一个参数为上边距离top的距离，第二个参数为右边距离left的距离，第三个参数为下边距离top的距离，第四个参数为左边距离left的距离 利用这个属性可以实现以下例子： 1.实现半圆       .pie{ width:200px; height:200px;
Android 系统默认参数的修改
06-29 6305
Android 系统默认参数的修改 一般在新项目开始之初，我们需要针对客户需求进行各种系统默认属性的配置，通常这些属性都是通过build.prop、settings.db 、default.xml、一些功能package下的 config.xml 等来进行初始化配置的。 那么，要满足客户的定制需求，对于我们开发者来说，修改SettingsProvider默认值，而第一次开机时，用来填充sett
Flutter checkBox 自定义 圆角框
最新发布
06-08
要自定义 Flutter 中的 CheckBox 组件的圆角框，可以使用 CheckboxListTile 组件和自定义主题来实现。 首先，创建一个自定义主题，指定 CheckBox 组件的样式： ```dart ThemeData myTheme = ThemeData( primarySwatch: Colors.blue, checkboxTheme: CheckboxThemeData( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), ), ); ``` 然后，在需要显示 CheckBox 的位置，使用 CheckboxListTile 组件，并将主题应用于它： ```dart Theme( data: myTheme, child: CheckboxListTile( title: Text('Custom Checkbox'), value: isChecked, onChanged: (bool value) { setState(() { isChecked = value; }); }, ), ) ``` 这样，就可以在 Flutter 中自定义 CheckBox 组件的圆角框了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值