原生 复选框 input[type=“checkbox“] 样式修改

样式:

input[type="checkbox"] {
    position: relative;
    width: 25px;
    height: 25px;
    /* 用于控制 UI 控件的基于操作系统主题的原生外观。none 隐藏部件的某些特性 */
    appearance: none;
}

input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    border-radius: 50%;
}

input[type="checkbox"]:checked::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #f54500;
    background-color: #f54500;
    /* 对勾样式 */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 25px;
}

主要注意点:appearance: none;


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

采用uniapp实现的银行卡卡片, 支持H5和微信小程序

采用uniapp-vue3实现的银行卡卡片 支持H5、微信小程序(其他小程序未测试过,可自行尝试) 可用于参考学习 可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id16736 使用示例

ansible的剧本

1 playbook 剧本 1.1 playbooks的组成 Tasks 任务,即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 Variables 变量 Templates 模板 Handlers 处理器,当changed状态条件满足时,(notify&#xff09…

“TypeError: utils request jS WEBPACK IMPORTED MODULE O .default is undefined‘报错

写项目时报下列错误,找了半天,结果才发现自己在request.js中少写了一行代码 一定不要少些代码 export default requestrequest.js完整代码 import axios from axios;//创建一个新的axios对象 const request axios.create({baseURL:http://localhost:…

AIDL的工作原理与使用示例 跨进程通信 远程方法调用RPC

AIDL的介绍与使用 AIDL(Android Interface Definition Language)是Android中用于定义客户端和服务端之间通信接口的一种接口定义语言。它允许你定义客户端和服务的通信协议,用于在不同的进程间或同一进程的不同组件间进行数据传递。AIDL通过…

SpringCloud Ribbon负载均衡的策略总结及其配置

1. 轮询策略 2. 权重轮询策略 3. 随机策略 4. 最少并发数策略 5. 在选定的负载均衡策略基础上重试机制 6. 可用性敏感策略。 7. 区域敏感策略 —————————————————————— Ribbon负载均衡策略的配置: 在application.yml中配置如下&am…

功能问题:如何开发一个自己的 VS Code 插件?

大家好,我是大澈! 本文约1100字,整篇阅读大约需要3分钟。 感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单&#xff01…

linuxshell日常脚本命令之sleep延时

shell之sleep指定延时单位(六) 用于延时打印或延时在超算投放任务 for i in $(seq 1 10);do echo $i;sleep 2m;done

机器学习面试:逻辑回归与朴素贝叶斯区别

逻辑回归与朴素贝叶斯区别有以下几个方面: (1)逻辑回归是判别模型,朴素贝叶斯是生成模型,所以生成和判别的所有区别它们都有。 (2)朴素贝叶斯属于贝叶斯,逻辑回归是最大似然,两种概率哲学间的区别。 (3)朴素贝叶斯需要条件独立假设…

Day10_面向对象-抽象类-接口-课后练习-参考答案

文章目录 代码编程题第1题第2题第3题 代码编程题 第1题 知识点:抽象类语法点:继承,抽象类按步骤编写代码,效果如图所示: 编写步骤: 定义抽象类A,抽象类B继承A,普通类C继承BA类中&…

IDEA 2021.3激活

1、打开idea,在设置中查找Settings/Preferences… -> Plugins 内手动添加第三方插件仓库地址:https://plugins.zhile.io搜索:IDE Eval Reset 插件进行安装。应用和使用,如图

迈向三维:vue3+Cesium.js三维WebGIS项目实战--持续更新中

写在前面:随着市场对数字孪生的需求日益增多,对于前端从业者的能力从对框架vue、react的要求,逐步扩展到2D、3D空间的交互,为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅,从…

Vue3-组合式Api(重点)

阅读文章你可以收获的知识 1.知道setup语法糖的使用和如何实现的 2.知道在vue3中如何定义响应式数据 3.知道在vue3中如何定义一个计算属性(computed) 4.知道如何在vue3中使用watch来监听数据 5.知道在vue3如何实现父子通信 6.知道vue3如何使用ref函…

前端架构: 脚手架之Chalk和Chalk-CLI使用教程

Chalk Chalk 是粉笔的意思, 它想表达的是,给我们的命令行中的文本添加颜色类似彩色粉笔的功能 在官方文档当中,它的 Highlights 核心特性 Expressive API Highly performant No dependencies Ability to nest styles 256/Truecolor color support Auto-…

dell r740服务器黄灯闪烁维修现场解决

1:首先看一下这款DELL非常主力的PowerEdge R740服务器长啥样,不得不说就外观来说自从IBM抛弃System X系列服务器后,也就戴尔这个外观看的比较顺眼。 图一:是DELL R740前视图(这款是8盘机型) 图二&#xff…

【算法与数据结构】1020、130、LeetCode飞地的数量 被围绕的区域

文章目录 一、1020、飞地的数量二、130、被围绕的区域三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、1020、飞地的数量 思路分析:博主认为题目很抽象,非常难理解。想了好久,要理解…

(っ•̀ω•́)っ 如何在PPT中为文本框添加滚动条

本人在写技术分享的PPT时,遇到问题:有一大篇的代码,如何在一张PPT页面上显示?急需带有滚动条的文本框!百度了不少,自己也来总结一篇,如下: 1、找到【文件】-【选项】 2、【自定义功…

基于 QUIC 协议的 HTTP/3 正式发布!

近期,超文本传输协议新版本 HTTP/3 RFC 文档,已由互联网工程任务组(IETF)对外发布。HTTP/3 全称为 HTTP-over-QUIC,指在 QUIC(Quick UDP Internet Connections, 快速 UDP 互联网连接)上映射 HTT…

3个精美的wordpress企业网站模板

WordPress企业网站模板 https://www.zhanyes.com/qiye/6305.html WordPress企业官网模板 https://www.zhanyes.com/qiye/6309.html WordPress律师模板 https://www.zhanyes.com/qiye/23.html

深入浅出JVM(四)之类文件结构

深入浅出JVM(四)之类文件结构 Java文件编译成字节码文件后,通过类加载机制到Java虚拟机中,Java虚拟机能够执行所有符合要求的字节码,因此无论什么语言,只要能够编译成符合要求的字节码文件就能够被Java虚拟…

webpack配置杂记

1、热更新 安装webpack-dev-server : npm i webpack-dev-server -D webpack.config.js配置 module.exports {// 其他配置...,// 热更新配置devServer: {host: "localhost",port: 3000,}, } 2、入口entry:使用相对路径们也就是webpack程序运行的路径&am…