当前位置： 首页 > news >正文

html将复选框变为圆形样例

news 2026/2/7 11:52:36

html将复选框变为圆形样例

  • 说明
  • 目录
  • 使用对勾图标实现圆形复选框
    • 原复选框html代码及默认样式
    • 取消复选框未勾选前的样式
    • 新增复选框未勾选前的样式
    • 新增复选框勾选后的样式
    • 获取复选框选中后的value值
  • 使用CSS样式写对勾图标实现圆形复选框

说明

这里记录下用原生html实现将原复选框默认的正方形改为圆形的样例。一共2种方法，第一种是使用对勾图标实现，第二种是自己写CSS样式画一个对勾实现。

目录

一个样例demo,一个对勾图标。
在这里插入图片描述

使用对勾图标实现圆形复选框

原复选框html代码及默认样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈
</body>
</html>

页面效果如下:
在这里插入图片描述

取消复选框未勾选前的样式

使用appearance:none;取消复选框默认样式。

appearance属性允许将HTML元素设置成使元素看上去像标准的用户界面元素。该属性支持如下常用的属性值none:不使用任何界面外观效果
button:将元素设置成按钮的外观效果
checkbox:将元素设置成复选框的外观效果
push-button:将按钮设置成push按钮的外观效果
radio:将元素设置成单选钮的外观效果
searchfield:将元素设置成输入框的外观效果
searchfield-cancel-button:将元素设置成输入框内取消按钮的外观效果
slider-horizontal:将元素设置成水平拖动条的外观效果
slider-vertical:将元素设置成垂直拖动条的外观效果
sliderhumb-horizontal:将元素设置成水平拖动条的滑块的外观效果
sliderhumb-vertical:将元素设置成垂直拖动条的滑块的外观效果
square-button:将按钮设置成square按钮的外观

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css">
/*复选框未勾选前的样式*/
input[type="checkbox"]{	appearance:none;/*取消默认的复选框样式*/
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈1<br/>
</body>
</html>

页面效果如下:
在这里插入图片描述

新增复选框未勾选前的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css">
/*复选框未勾选前的样式*/
input[type="checkbox"]{	appearance:none;/*取消默认的复选框样式*//*重新写一个复选框圆角样式*/width:20px;/*设置方形宽度为20px*/height:20px;/*设置方形高度为20px*/border:1px solid #aaaaaa;/*设置边框样式*/border-radius:50%;/*将方形的边框改为圆形*/
}
</style><script type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈
</body>
</html>

页面效果如下:
在这里插入图片描述

新增复选框勾选后的样式

这里我使用了一个对勾图片来做复选框勾选后的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css">
/*复选框未勾选前的样式*/
input[type="checkbox"]{	appearance:none;/*取消默认的复选框样式*//*重新写一个复选框圆角样式*/width:20px;/*设置方形宽度为20px*/height:20px;/*设置方形高度为20px*/border:1px solid #aaaaaa;/*设置边框样式*/border-radius:50%;/*将方形的边框改为圆形*/}
/*复选框选择后的样式*/
input[type="checkbox"]:checked {background-image:url('duigou.jpg');/*复选框选中后添加背景图片*/background-repeat:no-repeat;/*取消背景图片平铺*/background-size:27px 27px;/*背景图片大小,第一个27px表示width宽度,第二个27px表示height高度*/background-position: center;/*背景图居中对齐*/
}
</style><script type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈
</body>
</html>

页面勾选后的效果图，达到想要的预期结果:
在这里插入图片描述

获取复选框选中后的value值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css">
/*复选框未勾选前的样式*/
input[type="checkbox"]{	appearance:none;/*取消默认的复选框样式*//*重新写一个复选框圆角样式*/width:20px;/*设置方形宽度为20px*/height:20px;/*设置方形高度为20px*/border:1px solid #aaaaaa;/*设置边框样式*/border-radius:50%;/*将方形的边框改为圆形*/}
/*复选框选择后的样式*/
input[type="checkbox"]:checked {background-image:url('duigou.jpg');/*复选框选中后添加背景图片*/background-repeat:no-repeat;/*取消背景图片平铺*/background-size:27px 27px;/*背景图片大小,第一个27px表示width宽度,第二个27px表示height高度*/background-position: center;/*表示背景图居中对齐*/
}
</style><script type="text/javascript">
//获取选中的复选框的值
function test(){var testValue = document.getElementsByName('test');var str = [];for(i=0;i<testValue.length;i++){if(testValue[i].checked){str.push(testValue[i].value);}}console.log(str);
}
</script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈1<br/>
<input type="checkbox" name="test" value="哈哈2">哈哈2<br/>
<button onclick="test()">点击我获取复选框的值</button>
</body>
</html>

页面效果如下:
在这里插入图片描述

使用CSS样式写对勾图标实现圆形复选框

符号使用说明:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html将复选框改为圆形样例</title>
<style type="text/css">
/*复选框未勾选前的样式*/
input[type="checkbox"]{	appearance:none;/*取消默认的复选框样式*//*重新写一个复选框圆角样式*/width:20px;/*设置方形宽度为20px*/height:20px;/*设置方形高度为20px*/border:1px solid #aaaaaa;/*设置边框样式*/border-radius:50%;/*将方形的边框改为圆形*/}
/*复选框选择后的样式,使用CSS样式写对勾*/
input[type="checkbox"]:checked {	background:green;/*设置选中后的背景颜色,这里为绿色*/&:before {	   content: '\2714';/*添加一个对勾,默认颜色是黑色*/color: white;/*将对勾颜色改为白色*/margin-left:4px;/*将对勾左边距改为4px,让它看着像居中*/}
}
</style><script type="text/javascript">
//获取选中的复选框的值
function test(){var testValue = document.getElementsByName('test');var str = [];for(i=0;i<testValue.length;i++){if(testValue[i].checked){str.push(testValue[i].value);}}console.log(str);
}
</script>
</head>
<body>
<input type="checkbox" name="test" value="哈哈1">哈哈1<br/>
<input type="checkbox" name="test" value="哈哈2">哈哈2<br/>
<button onclick="test()">点击我获取复选框的值</button>
</body>
</html>

页面效果如下:
在这里插入图片描述
html将复选框变为圆形样例2种实现方式就先记录到这里，等以后用到直接参考这个样例即可。
备注:未选中前哈哈字在下面一点，没有对齐，不是很完美。等以后再完善对齐。

相关文章：

html将复选框变为圆形样例

html将复选框变为圆形样例 说明目录使用对勾图标实现圆形复选框原复选框html代码及默认样式取消复选框未勾选前的样式新增复选框未勾选前的样式新增复选框勾选后的样式获取复选框选中后的value值 使用CSS样式写对勾图标实现圆形复选框 说明 这里记录下用原生html实现将原复选框…...

编程日记 2023/11/7 4:29:10

笔记软件 Keep It mac v2.3.3中文版新增功能

Keep It mac是一款专为 Mac、iPad 和 iPhone 设计的笔记和信息管理应用程序。它允许用户在一个地方组织和管理他们的笔记、网络链接、PDF、图像和其他类型的内容。Keep It 还具有标记、搜索、突出显示、编辑和跨设备同步功能。 Keep It for mac更新日志 修复了更改注释或富文本…...

编程日记 2023/11/7 4:28:08

uni-app 开发的H5 定位功能部署注意事项

一、H5部署的时候&#xff0c;如果设计到定位功能&#xff0c;需要注意以下几点 1、打包部署的时候需要在Web配置-定位和地图里面勾选一个地图&#xff0c;并配置key 2、打包部署需要域名是https协议的&#xff0c;大多数现代浏览器要求在HTTPS协议下才能够访问地理位置信息&a…...

编程日记 2023/11/7 4:27:06

CY5-COOH脂溶性羧基荧光染料1032678-07-1

Cyanine5-COOH是一种荧光染料&#xff0c;它CAS号1032678-07-1&#xff0c;分子式为C32H39ClN2O2&#xff0c;分子量为519.12。Cyanine5-COOH具有良好的光稳定性和荧光亮度&#xff0c;可以用于生物学研究、诊断、药物筛选等领域。 Cy5-COOH (来自星戈瑞的花菁染料) 含有羧基官…...

编程日记 2023/11/7 4:26:04

【CSS】div 盒子居中的常用方法

<body><div class"main"><div class"box"></div></div> </body>绝对定位加 margin: auto; &#xff1a; <style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;positio…...

编程日记 2023/11/7 4:20:59

Pytorch网络模型训练

现有网络模型的使用与修改 vgg16_false torchvision.models.vgg16(pretrainedFalse) # 加载一个未预训练的模型 vgg16_true torchvision.models.vgg16(pretrainedTrue) # 把数据分为了1000个类别print(vgg16_true) 以下是vgg16预训练模型的输出 VGG((features): S…...

编程日记 2023/11/7 4:19:58

webgoat-Path traversal

Path traversal 路径&#xff08;目录&#xff09;遍历是一种漏洞&#xff0c;攻击者能够访问或存储外部的文件和目录 应用程序运行的位置。这可能会导致从其他目录读取文件&#xff0c;如果是文件&#xff0c;则会导致读取文件 上传覆盖关键系统文件。 它是如何工作的&#…...

编程日记 2023/11/7 4:17:55

P8976 「DTOI-4」排列，贪心

题目背景 Update on 2023.2.1&#xff1a;新增一组针对 yuanjiabao 的 Hack 数据&#xff0c;放置于 #21。 Update on 2023.2.2&#xff1a;新增一组针对 CourtesyWei 和 bizhidaojiaosha 的 Hack 数据&#xff0c;放置于 #22。 题目描述 小 L 给你一个偶数 n 和两个整数a,b…...

编程日记 2023/11/7 4:16:54

使用 Python 进行自然语言处理第 5 部分：文本分类

一、说明 关于文本分类&#xff0c;文章已经很多&#xff0c;本文这里有实操代码&#xff0c;明确而清晰地表述这种过程&#xff0c;是实战工程师所可以参照和依赖的案例版本。 本文是 2023 年 1 月的 WomenWhoCode 数据科学跟踪活动提供的会议系列文章中的一篇。 之前的文章在…...

编程日记 2023/11/7 4:15:53

uni-app---- 点击按钮拨打电话功能点击按钮调用高德地图进行导航的功能【安卓app端】

uniapp---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】 先上效果图&#xff1a; 1. 在封装方法的文件夹下新建一个js文件&#xff0c;然后把这些功能进行封装 // 点击按钮拨打电话 export function getActionSheet(phone) {uni.showAct…...

编程日记 2023/11/7 4:14:52

通讯录详解（静态版，动态版，文件版）

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索✅C语言刷题专栏&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x…...

编程日记 2023/11/7 4:12:49

在windows中搭建vue开发环境

1.环境搭建 具体环境搭建步骤参考链接 注意该博客中初始化命令&#xff1a; vue init webpack MyPortalProject需改为小写&#xff1a; vue init webpack myportalproject不然会报错 Warning: name can no longer contain capital letters2.创建第一个vueelement ui项目 …...

编程日记 2023/11/7 4:11:48

数字化转型：云表低代码开发助力制造业腾飞

数字化转型已成为制造业不可避免的趋势。为了应对市场快速变化、提高运营效率以及降低成本&#xff0c;制造业企业积极追求更加智能化、敏捷的生产方式。在这个转型过程中&#xff0c;低代码技术作为一种强大的工具&#xff0c;正逐渐崭露头角&#xff0c;有望加速制造业的数字…...

编程日记 2023/11/7 4:10:45

Linux学习之vim跳转到特定行数

参考的博客&#xff1a;《Vim跳到最后一行的方法》 《oeasy教您玩转vim - 14 - # 行头行尾》 《Linux&#xff1a;vim 中跳到首行和最后一行》 想要跳到特定行的话&#xff0c;可以在命令模式和正常模式进行跳转。要是对于vim的四种模式不太熟的话&#xff0c;可以到博客《Linu…...

编程日记 2023/11/7 4:09:44

详解基于Android的Appium+Python自动化脚本编写

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…...

编程日记 2023/11/7 4:07:42

【马蹄集】—— 百度之星 2023

百度之星 2023 目录 BD202301 公园⭐BD202302 蛋糕划分⭐⭐⭐BD202303 第五维度⭐⭐ BD202301 公园⭐ 难度&#xff1a;钻石    时间限制&#xff1a;1秒    占用内存&#xff1a;64M 题目描述 今天是六一节&#xff0c;小度去公园玩&#xff0c;公园一共 N N N 个景点&am…...

编程日记 2023/11/7 4:06:41

大数据毕业设计选题推荐-无线网络大数据平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2023/11/7 4:05:39

【jvm】虚拟机之本地方法接口与本地方法库

目录 一、本地方法1.1 说明1.2 代码示例1.3 为什么要使用native method 二、现状 一、本地方法 1.1 说明 1.一个Native Method就是一个Java调用非Java代码的接口。 2.一个Native Method是这样一个Java方法&#xff1a;该方法的实现由非Java语言实现&#xff0c;比如C。 3.这个…...

编程日记 2023/11/7 4:04:36

HDFS系统操作命令大全

一&#xff0c;前言 HDFS作为分布式存储的文件系统&#xff0c;有其对数据的路径表达方式 HDFS同linux系统一样&#xff0c;均是以/作为根目录的组织形式 linux&#xff1a;/usr/local/hello.txt HDFS&#xff1a;/usr/local/hello.txt 二&#xff0c;如何区分呢&#xff1f; L…...

编程日记 2023/11/7 4:03:33

雷尼绍探头编程 9810

9810 ​ 安全移动 使用参数 参数含义#9移动速度 F#117移动速度 F#148#24X 移动 终点绝对坐标#25Y 移动 终点绝对坐标#26Z 移动 终点绝对坐标#123机床移动到终点的绝对坐标 与 终点的理论值 的 差#5041当前绝对坐标 X 值#5042当前绝对坐标 Y 值#5043当前绝对坐标 Z 值#116刀具…...

编程日记 2023/11/7 4:02:33

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/4 3:14:18

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29