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

html将复选框变为圆形样例

news 文章来源：https://blog.csdn.net/weixin_48040732/article/details/134198671 2025/5/19 11:55:02

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

el-table 列分页

<template><div><el-table:data"tableData":key"tampTime"style"width: 100%"><el-table-columnprop"name"label"姓名"width"180"></el-table-column><el-table-columnprop&quo…...

编程日记 2023/11/7 4:01:32

APP攻防--ADB基础

进入app包 先使用 adb devices查看链接状态 手机连接成功的 adb shell 获取到手机的一个shell 此时想进入app包时没有权限的&#xff0c;APP包一般在data/data/下。没有执行权限&#xff0c;如图 Permission denied 权限被拒绝 此时需要手机root&#xff0c;root后输入 su …...

编程日记 2023/11/7 4:00:31

【Linux】第十站：git和gdb的基本使用

文章目录 一、git的基本操作1.gitee新建仓库注意事项2.git的安装3.git的克隆4.git的add5.git的commit6.git的push7.git log8.git status9. .gitignore 二、Linux调试器---gdb1.背景2.gdb安装、进入与退出3.list/l4.r/run运行程序5. break/b 打断点6.info/i b 查看断点7.delete/…...

编程日记 2023/11/7 3:59:30

Single Image Haze Removal Using Dark Channel Prior(暗通道先验)

去雾算法都会依赖于很强的先验以及假设&#xff0c;并结合相应的物理模型&#xff0c;完成去雾过程。本文作者何凯明及其团队通过大量的无雾图像和有雾图像&#xff0c;归纳总结出无雾图像在其对应的暗通道图像上具有极低的强度值&#xff08;趋近于0&#xff09;&#xff0c;并…...

编程日记 2023/11/7 3:58:29

力扣382.链表随机节点（java利用数组随机返回节点值）

Problem: 382. 链表随机节点 文章目录 思路解题方法复杂度Code 思路 注意链表与数组的特性&#xff0c;对于随机访问读取的操作利用数组可以较方便实现&#xff0c;所以我们可以将链表中的节点值先存入到数组中最后再取出随机生成节点位置的值。 解题方法 1.生成List集合与Rand…...

编程日记 2023/11/7 3:56:27

在jupyter中使用R

如果想在Jupyter Notebook中使用R语言&#xff0c;以下几个步骤操作可行&#xff1a; 1、启动Anaconda Prompt 2、进入R的安装位置&#xff0c;切换到R的安装位置&#xff1a;D:\Program Files\R\R-3.4.3\bin&#xff0c;启动R&#xff0c;具体代码操作步骤如下&#xff0c;在…...

编程日记 2023/11/7 3:54:22

2023（第四届）江西开放数据创新应用大赛等你来挑战！

邀请函 这是一个友好的邀请。无论你是数据领域的专家、学生还是爱好者&#xff0c;我们都欢迎你加入这个平台。这不仅仅是一场比赛&#xff0c;更是一个交流、学习和展示自己的机会。 丰厚奖金&#xff1a;我们为参赛者准备了总计15W的奖金池&#xff0c;期待你的才华在这里得…...

编程日记 2023/11/7 3:53:21

2023-mac rz sz 安装

之前安装过一次&#xff0c;没问题&#xff0c;这次按照之前教程装了就不管上传下载都会卡住&#xff1b; step1: brew install lrzsz step2&#xff1a;在/usr/local/bin 路径下配置两个sh,之前从网上找到的直接用都不对&#xff0c;下面这个是调试过的正式可用的 iterm2…...

编程日记 2023/11/7 3:52:20

使用Matplotlib绘画3D图时运行不出结果，也不报错，图片是空白 ！！

1.问题&#xff1a; 我使用如下代码运用matplotlib中的Axes3D绘画3D图&#xff0c;但是运行出来的结果是空白。 import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D #导入3D包 fig plt.figure() #窗口 #ax Axes3D(fig) # X, Y …...

编程日记 2023/11/7 3:51:18

Matlab函数——find

介绍 当你需要返回某个数组中符合指定条件的所有元素的索引时&#xff0c;可以使用 MATLAB 中的 find 函数。 find 函数语法&#xff1a; indices find(X) indices find(X, k) indices find(X, k, first) indices find(X, k, last) 其中&#xff0c;X 是一个数组&#xf…...

编程日记 2023/11/7 3:50:17