• html将复选框变为圆形样例

    html将复选框变为圆形样例

    说明

    这里记录下用原生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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

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

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

    使用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按钮的外观

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

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

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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

    新增复选框勾选后的样式

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

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

    获取复选框选中后的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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

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

    使用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

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

  • 相关阅读:
    ESP8266-Arduino编程实例-Nokia5110显示屏驱动
    Django 4.0.6源码分析：自动重启机制
    Java开发面试--Redis专区
    pytorch复习笔记--nn.Embedding()的用法
    使用containerd搭建MinIO集群服务
    CISC和RISC的比较
    韦东山linux驱动开发学习【常更】
    华为云14天鸿蒙设备开发-Day9网络应用开发
    CE修改器学习历程之普通变量的保存
    基于协同过滤的电商推荐系统（2）：用户对商品的偏好得分
  • 原文地址：https://blog.csdn.net/weixin_48040732/article/details/134198671