css实现更改checkbox的样式;更改checkbox选中后的背景色;更改checkbox选中后的icon

news2025/1/18 20:24:44

<input class="check-input" type="checkbox">
   .check-input {
      width: 16px;
      height: 16px;
    }    

/* 设置默认的checkbox样式 */
  input.check-input[type="checkbox"] {
    -webkit-appearance: none; /* 移除默认样式 */
    border: 1px solid #999;
    outline: none;
    border-radius: 2px;
    border: 1px solid #4C4E4F;
    background: #FFF; 
    position: relative;
  }
 
  /* 设置选中状态下的checkbox样式 */
  input.check-input[type="checkbox"]:checked {
    background-color: red; /* 你可以更改这个颜色为你想要的颜色 */
  }
  /* 显示对勾 */
  #europe-collection-list input.check-input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background-image: url('https://files/check_d92be03b-2b9b-4819-8e5f-169818b5d9e8.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

更改后的样式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1572142.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IAR激活The generation feature is not of version 18解决办法

参考文章&#xff1a; IAR9.30以上版本安装、注册、新建工程和配置过程详细介绍 IAR9.32资源&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1xxMLTe8yLSmjIrzDc4-DAQ?pwdled0 提取码&#xff1a;led0 注意事项&#xff1a; 需要把licpatcher64a.exe在每个文件夹…

【原创】springboot+vue校园座位预约管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

真--个人收款系统方案

此文主要说明方案&#xff0c;无代码部分 前言: 有个个人项目需要接入vip系统&#xff0c;我们发现微信、支付宝的官方API主要服务商户&#xff0c;而市面上的“个人收款系统”也往往不符合我们的需求。不过&#xff0c;每次支付时通知栏的信息给了我灵感。走投无路&#xff0…

回文链表 - LeetCode 热题 24

大家好&#xff01;我是曾续缘❣️ 今天是《LeetCode 热题 100》系列 发车第 24 天 链表第 3 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &…

LeetCode - 移除石子使总数最小

1962. 移除石子使总数最小 当我看到这道题目的时候&#xff0c;第一时间想到的是&#xff1a;while循环 sort&#xff0c;时间复杂度 k*nlogn。题目要求执行k次操作后&#xff0c;剩下狮子的最小总数&#xff0c;我们是否可以考虑维护一个堆呢&#xff1f;堆顶值最大&#xff…

电商技术揭秘六:前端技术与用户体验优化

文章目录 引言一、前端技术在电商中的重要性1.1 前端技术概述1.2 用户体验与前端技术的关系 二、响应式设计与移动优化2.1 响应式设计的原则2.2 移动设备优化策略2.3 响应式设计的工具和框架 三、交互设计与用户体验提升3.1 交互设计的重要性3.2 用户体验的量化与优化3.3 通过前…

python笔记(9)Dictionary(字典)

目录 创建字典 取值 修改字典 删除 内置函数和方法 创建字典 字典键值和value用&#xff1a;隔开&#xff0c;键值是不可变的&#xff0c;而且必须是唯一的&#xff0c;值可以变&#xff0c;可以是任意类型 dict {key1 : value1, key2 : value2 } 1&#xff09;不允许同…

用友NC Cloud importhttpscer 任意文件上传漏洞复现

0x01 产品简介 用友 NC Cloud 是一种商业级的企业资源规划云平台,为企业提供全面的管理解决方案,包括财务管理、采购管理、销售管理、人力资源管理等功能,基于云原生架构,深度应用新一代数字技术,打造开放、 互联、融合、智能的一体化云平台,支持公有云、混合云、专属云…

c# wpf Template ContentTemplate

1.概要 1.1 定义内容的外观 2.2 要点分析 2.代码 <Window x:Class"WpfApp2.Window1"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schem…

使用 msys2 sshd为 windows 搭建 ssh 服务器

文章目录 概要整体架构流程技术名词解释MSYS2openSSH服务器 技术细节安装 MSYS2 环境安装openSSH配置、启动SSH 小结和扩展 概要 SSH服务器在Linux下的搭建一般的文章讨论的比较多了。在Windows下&#xff0c;我们常用Windows的Linux子系统来搭建ssh服务器。那有没有更好更简洁…

计算机网络—HTTP协议:深入解析与应用实践

​ &#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;ヒステリックナイトガール 1:03━━━━━━️&#x1f49f;──────── 5:06 &#x1f504; ◀️ ⏸ ▶️ ☰…

This app has no Android key hashes configured. . Configure your app key

Unity 接入 Facebook SDK 的过程中遇到这个问题&#xff0c;查了很多帖子&#xff0c;不太直观&#xff0c;记录下来方便需要的同学参考 报上面错误的原因是在https://developers.facebook.com/apps/ 设置里没有填入有效的密钥 怎么填入这个密钥呢&#xff0c;其实很简单&…

微电网优化:基于巨型犰狳优化算法(Giant Armadillo Optimization,GAO)的微电网优化(提供MATLAB代码)

一、微电网优化模型 微电网是一个相对独立的本地化电力单元&#xff0c;用户现场的分布式发电可以支持用电需求。为此&#xff0c;您的微电网将接入、监控、预测和控制您本地的分布式能源系统&#xff0c;同时强化供电系统的弹性&#xff0c;保障您的用电更经济。您可以在连接…

蓝桥杯 - 穿越雷区

解题思路&#xff1a; dfs 方法一&#xff1a; import java.util.Scanner;public class Main {static char[][] a;static int[][] visited;static int[] dx { 0, 1, 0, -1 };static int[] dy { 1, 0, -1, 0 };static long min Long.MAX_VALUE;static long count 0;publi…

HuggingFace踩坑记录-连不上,根本连不上

学习 transformers 的第一步&#xff0c;往往是几句简单的代码 from transformers import pipelineclassifier pipeline("sentiment-analysis") classifier("We are very happy to show you the &#x1f917; Transformers library.") ""&quo…

DSP实时计算平台设计方案:912-基于6U CPCIe的双路光纤图像DSP实时计算平台

基于6U CPCIe的双路光纤图像DSP实时计算平台 一、设备概述 设备基于6U CPCIe架构&#xff0c;通过背板交换实现4片信号处理板卡的互联传输&#xff0c;每个信号处理板卡支持双TMS320C6678&#xff0c;支持2路光纤的图像处理&#xff0c;实现FPGA的预处理和备份工…

11 - 三八译码器和存储器组织

---- 整理自B站UP主 踌躇月光 的视频 1. 38译码器 1.1 真值表 A2A1A0O7O6O5O4O3O2O1O00000000000100100000010010000001000110000100010000010000101001000001100100000011110000000 O 0 A 2 ‾ A 1 ‾ A 0 ‾ O 1 A 2 ‾ A 1 ‾ A 0 O 2 A 2 ‾ A 1 A 0 ‾ O 3 A 2 ‾ A…

c语言--枚举类型(声明、使用、优点)

目录 一、枚举类型的声明二、 枚举类型的优点三、 枚举类型的使用 一、枚举类型的声明 枚举顾名思义就是一一列举。 把可能的取值⼀⼀列举。 比如我们现实生活中&#xff1a; ⼀周的星期⼀到星期日是有限的7天&#xff0c;可以⼀⼀列举 性别有&#xff1a;男、女、保密&#x…

vscode 连接远程服务器 服务器无法上网 离线配置 .vscode-server

离线配置 vscode 连接远程服务器 .vscode-server 1. .vscode-server下载 使用vscode连接远程服务器时会自动下载配置.vscode-server文件夹&#xff0c;如果远程服务器无法联网&#xff0c;则需要手动下载 1&#xff09;网址&#xff1a;https://update.code.visualstudio.com…

【蓝桥杯-单链表-网络寻路】

蓝桥杯-单链表-网络寻路 单链表基本操作操作一&#xff1a;向链表头插入一个数操作二:在第 k个插入的数后插入一个数操作三&#xff1a;删除第 k个插入的数后面的一个数&#xff1b; P8605 [蓝桥杯 2013 国 AC] 网络寻路 单链表基本操作 初始化有关操作 // head 表示头结点的…