当前位置:首页 > 前端技术 > 纯 CSS 解决自定义 CheckBox 背景颜色问题

纯 CSS 解决自定义 CheckBox 背景颜色问题

2022年11月09日 21:28:49前端技术4

CodePen

需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里

未选中

选中

主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个勾

  • html
<label>
  <input type="checkbox" /> // 注意嵌在 label 里面
  记住密码
  <div class="show-box" /> // 注意嵌在 label 里面
</label>
  • CSS(LESS)
label {
  position: relative;
  cursor: pointer;

  input {
    cursor: pointer;
  }

  input:checked   .show-box {
    background: #ec6337;
  }

  .show-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    background: white; // 这里取个巧,与下面颜色一样而已

    &:before { // 使用了 absolute 所以无所谓是 before 还是 after
      content: ''; // 空白内容占位,当做盒模型处理,见下面
      position: absolute;
      top: 2px;
      left: 6px;
      width: 3px; // 勾的短边
      height: 8px; // 勾的长边
      border: solid white; // 勾的颜色
      border-width: 0 2px 2px 0; // 勾的宽度
      transform: rotate(45deg); // 定制宽高加上旋转可以伪装内部的白色勾
    }
  }

CodePen

作者:普通网友
来源链接:https://blog.csdn.net/qq_37555524/article/details/100178838

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69131.html

标签: css
分享给朋友:

“纯 CSS 解决自定义 CheckBox 背景颜色问题” 的相关文章

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

CSS中的global

在我使用antd等组件时,常常需要更改组件的默认样式,这时候,我们就需要用:global{}将需要修改的样式包裹起来。这种情况,我遇到过很多次,但是从来没有探究过原因,今天就浅浅的说一下我的理解。 在说这个问题之前,我们需要先知道CSS Modules。...

css font属性详解

一、字体属性         1、字体             属性:font-family     ...

CSS中的Position属性

CSS中的Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。 1、简介 position有五个属性: static | relative | absolute | fixed | inheri...

Css图文排布

Css图文排布

图文排布看似简单其实需要花大量的精力去修改,其中图文排布是最常见到的,下面分享下,我对此的一些经验吧 ————————————————– 1.最简单的图文排列——一个图片+一段文字形式 img为行级标签,所以在不进行任何修饰情况下,图片与文字是不整齐的,这时我...

css实现li标签不可点击

css实现li标签不可点击,代码如下: style="pointer-events: none;" 作者:不平凡中的平凡 来源链接:https://blog.csdn.net/weixin_40667880/article...

css中怎么设置字体加粗,css怎么把字体加粗加大

1. css中字体加粗怎么设置为最粗 字体加粗 font-weight 属性设置文本的粗细。 使用 bold 关键字可以将文本设置为粗体。 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数...

css属性标签选择器

css属性标签选择器

今天在项目中发现组件内包含了一个class选择器  查询后发现这种属于属性标签选择器,相对于传统的元素选择器等,可以实现更多的类或标签的选择,甚至直接查询属性,使用起来更加灵活。 语法 [attr] 表示带有以 attr 命名的属性的元素。...

你所不知道的 CSS 滤镜技巧与细节

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。 OK,下面直接进入正文。本文所描述的滤镜,指的是...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。