html将复选框变为圆形样例

news2024/11/26 13:34:31

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种实现方式就先记录到这里,等以后用到直接参考这个样例即可。
备注:未选中前哈哈字在下面一点,没有对齐,不是很完美。等以后再完善对齐。

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

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

相关文章

<蓝桥杯软件赛>零基础备赛20周--第4周--杂题-1

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

Go 多版本管理

在日常开发工作过程中&#xff0c;很多时候我们都需要在自己的机器上安装多个go版本&#xff0c;像是go1.16引入的embed&#xff0c;go1.18引入了泛型&#xff1b;又或是自己本地使用的是最新版&#xff0c;但公司的项目中使用的go1.14、go1.13甚至是更早的版本。 那么有没有既…

甲方自建ERP这事靠不靠谱?来听听读过中欧商学院的老板怎么说

李总自建ERP开发团队的失败案例&#xff0c;投入三年&#xff0c;花了五六百万&#xff0c;做出来的东西&#xff0c;远不如免费开源的Odoo软件。Odoo有强大的技术平台&#xff0c;有无穷的功能插件。李总现身说法&#xff1a;“早知道有Odoo&#xff0c;何必瞎折腾&#xff0c…

msvcr110.dll丢失的解决方法都有哪些,有效解决msvcr110.dll丢失

今天在使用电脑的时候提示一个和“msvcr110.dll丢失”有关的报错&#xff0c;出现这样的问题小编也是一脸懵&#xff0c;一下也不是知道该怎么处理了&#xff0c;于是小编去了解了一下msvcr110.dll丢失是什么情况&#xff0c;为什么会有这样的问题发生&#xff0c;同时msvcr110…

WebBits库如何使用

WebBits 是一个用于构建 Web 应用程序的 Python 库。以下是使用 WebBits 库的一般步骤&#xff1a; 安装 WebBits&#xff1a;在终端或命令提示符中运行以下命令来安装 WebBits 库&#xff1a; pip install webbits 导入 WebBits 库&#xff1a;在 Python 脚本中导入 WebBits…

一篇新闻稿的标准格式是怎样的呢?建议收藏

企业和品牌每年都需要撰写大量的新闻稿和软文进行投放&#xff0c;优质的新闻稿件可以给品牌带来源源不断的用户流量&#xff0c;新闻稿要按照标准格式进行创作&#xff0c;一篇新闻稿的标准格式是怎样的呢? 接下来伯乐网络传媒就来给大家分享一下。 新闻稿的结构和排版是新闻…

快速了解:什么是优化问题

1. 定义 数学优化问题是&#xff1a;在给定约束条件下&#xff0c;找到一个目标函数的最优解&#xff08;最大值或最小值&#xff09;。 2. 快速get理解 初学者对优化技术陌生的话&#xff0c;可以把 “求解优化问题” 理解为 “解一个不等式方程组”&#xff0c;解方程的。…

[PyTorch][chapter 59][强化学习-2-有模型学习]

前言&#xff1a; 在已知模型的环境里面学习,称为有模型学习&#xff08;model-based learning&#xff09;. 此刻,下列参数是已知的&#xff1a; : 在状态x 下面,执行动作a ,转移到状态 的概率 : 在状态x 下面,执行动作a ,转移到 的奖赏 有模型强化学习的应用案例 …

儿童玩具跨境电商/TEMU平台要求北美CPC认证欧洲CE认证

儿童玩具跨境电商/TEMU平台要求北美CPC认证欧洲CE认证 最近Temu严格抽查一份关于儿童用品合规的通知。通知指出&#xff0c;为了保障Temu平台消费者的合法权益&#xff0c;以及保障儿童类商品在目的国的正常销售及合规要求&#xff0c;对于以12岁及以下儿童为主要使用对象的产…

智信SMS客户端操作手册

登录系统 登录前需查看用户协议输入账号和密码&#xff0c;点击登录即可 首页介绍 登录成功之后&#xff0c;进入操作页面。 操作页面包括&#xff1a;设置、导入手机号、发送短信三大块功能。 如图&#xff1a; 导入手机号 点击首页中的导入按钮&#xff0c;即可导入手机…

微信小程序中使用GIF

前言 最近在微信小程序开发时遇到了一个非常复杂的动画&#xff0c;如果要手搓的话需要用canvas一点点弄&#xff0c;比较麻烦&#xff0c;于是打算做一个gif来实现动画效果 根据需求&#xff0c;动画只需播放一次即可&#xff0c;并且设置了一个重播按钮&#xff0c;点击即可重…

mysql-面试题

1. 这里我们可以看出有两种情况&#xff0c;要么活跃&#xff0c;要么不活跃&#xff0c;我的思路是统计出不活跃的&#xff0c; 并计算出他们所占比例&#xff0c;再用1减去他们所占比例&#xff0c;就可以得到留存率。大致思路就这样&#xff0c;具体代码后面补。下面代码为老…

TrafficWatch 数据包嗅探器工具

TrafficWatch 是一种数据包嗅探器工具&#xff0c;允许您监视和分析 PCAP 文件中的网络流量。它提供了对各种网络协议的深入了解&#xff0c;并可以帮助进行网络故障排除、安全分析等。 针对 ARP、ICMP、TCP、UDP、DNS、DHCP、HTTP、SNMP、LLMNR 和 NetBIOS 的特定于协议的数据…

PMI-ACP(103:17-56)

巩固复习&#xff1a;SCRUM Scrum是目前敏捷项目管理的经典框架&#xff0c;在2020年最新版的《Scrum指南》中&#xff0c;Scrum之父对迭代目标和完成的定义进行了更为清晰的阐释。 在Scrum里比较重要的是Sprint冲刺。一个Sprint长度一般是2&#xff5e;4周&#xff0c;固定&…

【C/C++】C++中重载、重写和隐藏的区别

重载 函数重载满足条件&#xff1a; 同一个作用域下函数名称相同函数参数类型不同 或者 个数不同 或者 顺序不同 注意: 函数的返回值不可以作为函数重载的条件。 #include<bits/stdc.h>using namespace std;class A {void fun() {};void fun(int i) {};void fun(int …

pytest自动化测试框架Allure功能特性介绍

前言 Allure框架是一个灵活的轻量级多语言测试报告工具&#xff0c;它不仅以web的方式展示了简介的测试结果&#xff0c;而且允许参与开发过程的每个人从日常执行的测试中最大限度的提取有用信息 从dev/qa的角度来看&#xff0c;Allure报告简化了常见缺陷的统计&#xff1a;失…

C# list<T>去重

文章目录 C# list<T>去重值类型去重List<object>object is intobject is decimalobject is charobject is boolobject is string List<int>List<string> 引用类型去重 C# list去重 值类型去重 List object is int //object is intList<object&g…

【华为数通HCIP | 网络工程师】821-BGP高频题、易错题(1)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️ 零…

如何进行有效的成本控制?

如何进行有效的成本控制&#xff1f; 接下来我会通过一些例子为大家深入浅出的讲讲生产制造业是如何进行成本控制的&#xff0c;下面用到的图片和系统都来自简道云的生产管理系统 这也是我们公司目前正在用的生产管理系统&#xff0c;是我们团队自己搭建的&#xff0c;在这里…