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

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: white; // 这里取个巧,与下面颜色一样而已
  }

  .show-box {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #ec6337;

    &: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

时间: 2024-10-09 16:19:40

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

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr

导航条的自定义:背景颜色设置,按钮标题图片设置,图片坐标修改

一.修改系统原生导航条 修改导航条背景颜色 self.navigationController.navigationBar.barTintColor = [UIColor colorWithHexString:@"#2295f2"]; 自定义导航条按钮 self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"btn-menu-h&q

自定义常用input表单元素三:纯css实现自定义Switch开关按钮

自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面先放HTML代码,看下DOM结构: <input type="checkbox" id="my_switch" class="my_switch"> <label for="my_

css 多个不定数量提交按钮居中显示,纯css解决

前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中,把div置为margin:10px auto(距上10像素,居中,然后又给了一个固定宽度,按钮放在这个div中,这样按钮就不能具体居中了) ,也不通用如果按钮减少到两个 或一个怎么办, 也有很多人用javascript 动态的算出宽度然后计算一大堆,并且很多时候比好用 错误代码: 1 <!DOCTY

CSS 实现选中内容背景颜色

// IE9+.Opera.Google Chrome 以及 Safari 中支持 ::selection{     color:#ff0000; } // firefox  ::-moz-selection{     color:#ff0000; } W3School:http://www.w3school.com.cn/cssref/selector_selection.asp

JavaGUI——设置框架背景颜色和按钮颜色

import java.awt.Color; import javax.swing.*; public class MyDraw { public static void main(String[] args) { //创建框架 JFrame myFrame=new JFrame("图画"); //myFrame.setLocation(200, 300);//第1参数表示离左屏幕边框距离,第2参数表示离屏幕上边框距离 myFrame.setSize(600, 400); myFram

如何用纯CSS布局两列,一列固定宽度,另一列自适应?

大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题.下面是我的一些小经验,疏漏之处还望大家体谅. 如果不用纯CSS解决此问题的话,我们可以先固定左侧DIV宽度为:100px,然后用JS取得当前浏览器宽度,再减去100px,然后赋值给右侧DIV宽度即可.这样就愉快的解决了,右侧的宽度就是自适应的了. 当然如果不是固定左侧DIV宽度为:100px的话,

用CSS解决一个让人头疼的需求

需求:下面的文字内容分别都写在一个a标签里,现在需要获取到每一行最后一个a标签的竖线,并删除  我首先想到的是用CSS3新增选择器-- :nth-child()来解决,比如 :nth-child(3n)  这里的3n表示获取到所有3的倍数的元素 更多用法参见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child     但这里又有一个问题,因为上面的文字内容都不是固定不变的,比如上面截图里的自考,现在是在第一排第3个, 但如果专升

纯CSS自定义Html中Checkbox复选框样式

原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观. 要做到这一点需要添加一段代码到你的CSS文件中. /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有