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

<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.hqwc.cn/news/588353.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图像分割】nnUnetV1与V2的Linux部署与应用命令

以前觉得麻烦&#xff0c;一直没用过nnunet&#xff0c;虽然知道它很火&#xff0c;最近一个契机&#xff0c;部署使用了一下nnunet&#xff0c;记录一下其部署和使用的方法与命令。 1、部署 首先&#xff0c;我有一个环境&#xff0c;这个环境可以是以前就有的&#xff0c;也可…

Python | Leetcode Python题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; INT_MAX 2 ** 31 - 1 INT_MIN -2 ** 31class Automaton:def __init__(self):self.state startself.sign 1self.ans 0self.table {start: [start, signed, in_number, end],signed: [end, end, in_number, end],in_number: [end, end,…

LabVIEW齿轮箱噪声监测系统

LabVIEW齿轮箱噪声监测系统 齿轮箱作为机械设备的“心脏”&#xff0c;其健康状态对设备的性能有着重要的影响。传统的齿轮箱监测方法依赖于直接的振动信号分析&#xff0c;但这种方法不仅成本高昂&#xff0c;而且在安装和拆卸过程中可能对设备造成损害。针对这些问题&#x…

Aurora8b10b(2)上板验证

文章目录 前言一、AXI_Stream数据产生模块二、上板效果总结 前言 上一篇内容我们已经详细介绍了基于aurora8b10b IP核的设计&#xff0c;本文将基于此进一步完善并且进行上板验证。 设计思路及代码思路参考FPGA奇哥系列网课 一、AXI_Stream数据产生模块 AXIS协议是非常简单的…

Java零基础入门到精通_Day 4

方法的重载 就是同一个类中的相同方法名的多个方法&#xff0c;但是他们的参数不同&#xff0c;类型不同或者参数个数不同。 &#xff08;与返回值无关&#xff09; package Base_One;public class Base_005 {public static void main(String[] args) {// Main method logic …

C++读取.bin二进制文件

C读取.bin二进制文件 在C中&#xff0c;可以使用文件输入/输出流来进行二进制文件的读写操作&#xff0c;方便数据的保存和读写。 //C读取bin二进制文件 int read_bin() {std::ifstream file("data_100.bin", std::ios::in | std::ios::binary);if (file) {// 按照…

plumelog日志查询使用指南

一、日志查询 字段说明 内容语法 1.中文需要用双引号包含 例如:"异常",默认会被按照单字体分割检索 2.多个检索条件可以用 AND OR NOT 来组合查询 例如 "异常" AND "内容" 3.单个不可分割单词可以用*开头或者结尾进行模糊匹配 例如 *NullPoi…

2013年认证杯SPSSPRO杯数学建模C题(第二阶段)公路运输业对于国内生产总值的影响分析全过程文档及程序

2013年认证杯SPSSPRO杯数学建模 C题 公路运输业对于国内生产总值的影响分析 原题再现&#xff1a; 交通运输作为国民经济的载体&#xff0c;沟通生产和消费&#xff0c;在经济发展中扮演着极其重要的角色。纵观几百年来交通运输与经济发展的相互关系&#xff0c;生产水平越高…

ARM FVP平台的terminal窗口大小如何设置

当启动ARM FVP平台时&#xff0c;terminal窗口太小怎么办&#xff1f;看起来非常累眼睛&#xff0c;本博客来解决这个问题。 首先看下ARM FVP平台对Host主机的需求&#xff1a; 通过上图可知&#xff0c;UART默认使用的是xterm。因此&#xff0c;我们需要修改xterm的默认字体设…

实景三维在数字乡村建设中的重要作用

随着科技的飞速发展&#xff0c;数字乡村建设已成为推动乡村振兴、实现农村现代化的重要途径。实景三维技术作为数字乡村建设的重要支撑&#xff0c;正逐渐在各个领域发挥着不可或缺的作用。本文将从实景三维技术在数字乡村中的应用场景、优势及未来展望等方面进行探讨&#xf…

Brain.js 的力量:构建多样化的人工智能应用程序

机器学习&#xff08;ML&#xff09;是人工智能 (AI) 的一种形式&#xff0c;旨在构建可以从处理的数据中学习或使用数据更好地执行的系统。人工智能是模仿人类智能的系统或机器的总称。 机器学习&#xff08;ML&#xff09;与复杂的数学纠缠在一起&#xff0c;让大多数初学者…

时序分解 | Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序…