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.mzph.cn/news/797508.shtml

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

相关文章

鹏哥C语言复习——结构体

目录 结构体声明&#xff1a; 结构体内存存储相关介绍&#xff1a; 结构体的初始化与使用&#xff1a; 结构体的初始化&#xff1a; 结构体的使用&#xff1a; 结构体对齐&#xff1a; 结构体对齐原则解释&#xff1a; 结构体对齐存在的原因&#xff1a; #pragma pack…

第十四届蓝桥杯省赛大学C组(C/C++)三国游戏

原题链接&#xff1a;三国游戏 小蓝正在玩一款游戏。 游戏中魏蜀吴三个国家各自拥有一定数量的士兵 X,Y,Z&#xff08;一开始可以认为都为 0&#xff09;。 游戏有 n 个可能会发生的事件&#xff0c;每个事件之间相互独立且最多只会发生一次&#xff0c;当第 i 个事件发生时…

Web API(二)之事件监听类型处理程序

Web API&#xff08;二&#xff09;之事件监听&类型&处理程序 事件事件监听事件类型事件处理程序 事件类型鼠标事件键盘事件焦点事件文本框输入事件 事件对象环境对象回调函数 学会通过为DOM注册事件来实现可交互的网页特效。 能够判断函数运行的环境并确字 this 所指代…

人工智能研究生前置知识—Anaconda与python工作环境

人工智能研究生前置知识—Anaconda与python工作环境 python环境管理 python工作环境的管理是需要满足的基本条件&#xff0c;指的是不同的python版本之间的切换。或者说是允许安装不同版本的python 解决&#xff1a;conda是一个跨平台的包管理工具&#xff0c;其环境管理功能允…

Docker容器与虚拟化技术:OpenEuler 部署 ES 与 Kibana

目录 一、实验 1.环境 2.OpenEuler 部署 ES (EalasticSearch) 3.OpenEuler 部署 Kibana 4.部署 Elasticvue插件 5.使用cpolar内网穿透 6.使用Elasticvue 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 1…

RabbitMQ3.13.x之九_Docker中安装RabbitMQ

RabbitMQ3.13.x之_Docker中安装RabbitMQ 文章目录 RabbitMQ3.13.x之_Docker中安装RabbitMQ1. 官网2. 安装1 .拉取镜像2. 运行容器 3. 访问 1. 官网 rabbitmq - Official Image | Docker Hub 2. 安装 1 .拉取镜像 docker pull rabbitmq:3.13.0-management2. 运行容器 # lates…

就业班 第二阶段 2401--4.1 day10 shell之“三剑客”+Expect

十一、shell 编程-grep egrep 支持正则表达式的拓展元字符 &#xff08;或grep -E&#xff09; #egrep [0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3} file1.txt [rootnewrain ~]# num11 1、运用正则&#xff0c;判断需要[[ ]] [rootnewrain ~]# [[ $num1 ~ ^[0-9]$ ]] &a…

Java类和对象之访问限制

学习-Java类和对象之访问限制 100 任务要求参考答案评论28 任务描述相关知识 defaultpublicprivateprotected编程要求测试说明 任务描述 本关任务&#xff1a;实现图书类&#xff0c;该类包含了图书的基本属性和信息。 相关知识 为了完成本关任务&#xff0c;你需要掌握&…

C++ 一种简单的软件验证码 程序授权使用 收费付费使用 无需注册 用机器码得到一个加密值 再对比加密值是否一致 只需加密

简单软件授权方案 1、获取机器码&#xff0c;发给软件开发者 2、开发者用机器码加密得到一个密文 发给使用者 3、使用者 用这个密文 与本地计算密文比较密文是否一致&#xff0c;一致就把密文写入到注册表&#xff0c;下次登录从注册表读密文对比。 &#xff08;最重要的是密…

设计模式总结-适配器模式

适配器模式 模式动机模式定义模式结构适配器模式实例与解析实例一&#xff1a;仿生机器人实例二&#xff1a;加密适配器 总结 模式动机 在软件开发中采用类似于电源适配器的设计和编码技巧被称为适配器模式。 通常情况下&#xff0c;客户端可以通过目标类的接口访问它所提供的…

ollama 本地轻松安装及使用docker web

这里视频其实还是蛮多的&#xff0c;环境是win10 Linux当然更好&#xff0c;奈何win10还有很多其他的AIGC的环境 所以还是索性在一个环境上比较好 1 下载 Download Ollama on macOS 修改成windows 有windows 版本所以直接下载 下载完毕后直接cmd 输入相应的下载模型 这里…

Qt实现Kermit协议(二)

3 实现 3.1 Kermit 该模块是Kermit协议实现类。 3.1.1 Kermit定义 /*|<------Included in CHECK----->|| |----------------------------- - --------| MARK | LEN | SEQ | TYPE | DATA | CHECK |<terminator>----------------------------- - …

一套C#自主版权+应用案例的手麻系统源码

手术麻醉信息管理系统源码&#xff0c;自主版权应用案例的手麻系统源码 手术麻醉信息管理系统包含了患者从预约申请手术到术前、术中、术后的流程控制。手术麻醉信息管理系统主要是由监护设备数据采集子系统和麻醉临床系统两个子部分组成。包括从手术申请到手术分配&#xff0c…

如何做好 Code Review?【下】

本文来自极狐GitLab 资源中心。原文链接&#xff1a;https://resources.gitlab.cn/articles/614fb704-882f-4601-927f-00a8b1dca2ed。 关联阅读 如何做好 Code Review&#xff1f;【上】如何做好 Code Review&#xff1f;【中】 GitLab 是一个全球知名的一体化 DevOps 平台&a…

设计模式:观察者模式示例

让我们通过一个天气监测应用的例子来展示观察者模式。在这个应用中&#xff0c;WeatherStation 作为可观察的主题&#xff0c;它会跟踪天气数据的变化。Display 作为观察者&#xff0c;当天气数据更新时会显示最新的信息。 示例代码&#xff1a; import java.util.ArrayList;…

【御控物联】JavaScript JSON结构转换(19):数组To对象——规则属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、术语解释三、案例之《JSON数组 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换&#xff0…

太阳能发电如何进行储存?常见的储存方法有3种!

在屋顶、院落或是其他太阳可以照射的地方&#xff0c;安装光伏板&#xff0c;即可实现太阳能发电&#xff0c;也称为光伏发电。这种发电方式是一种干净的可再生的新能源&#xff0c;越来越受到人们的青睐。太阳能发电后&#xff0c;如何将电能储存起来以备随时使用&#xff1f;…

纯小白蓝桥杯备赛笔记--DAY9(动态规划)

文章目录 一、动态规划基础&#xff08;1&#xff09;线性DP简介步骤例题数字三角形--1536破损的楼梯-3367安全序列-3423 &#xff08;2&#xff09;二维DP简介例题摆花--389选数异或--3711数字三角形--505 &#xff08;3&#xff09;最长公共子序列LCSLCS算法模型最长公共子序…

C语言函数实现冒泡排序

前言 今天我们来看看怎么使用函数的方式实现冒泡排序吧&#xff0c;我们以一个数组为例arr[] {9,8,7,6,5,4,3,2,1,0},我们将这个数组通过冒泡排序的方式让他变为升序吧。 代码实现 #include<stdio.h> void bubble_sort(int arr[], int sz) {int i 0;for (i 0;i < s…

js计算器实现

文章目录 1. 演示效果2. 分析思路3. 代码实现 1. 演示效果 2. 分析思路 给每个按钮添加点击事件&#xff0c;使用eval()进行计算。 3. 代码实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name&q…