程序员经验分享-hwhale

自定义单选框和多选框

2023-11-08

说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。

1.自定义单选框（有图片）

* ①先看效果图：

* ②再献上完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>radio and checkbox_1</title>
		<style>
			.outBorder{
				top: 100px;
				width: 800px;
				height: 400px;
				margin: 0 auto;
				background: #ace0ea;
			}
			.title{
				font-size: 18px;
			}
			
			/*单选框CSS*/
			.radioCheck{
				width: 470px;
				height:90px;
				margin: 0 auto;
			
			}
			.radioCheck label {
				margin-left: 50px;
   				margin-right: 50px;
			}
			.radioCheck label font{
				font-size: 16px;
				line-height: 47px;
   				padding-left: 4px;
			}
			input[type="radio"]{
				appearance: none; 
				-webkit-appearance: none;
				outline: none;
				display:none;
				}

			label{
				display:inline-block;
				cursor:pointer;
				}

			label input[type="radio"] + span{
				float: left;
				 width:35px;
				 height:39px;
				 display:inline-block;
				 background:url(images/videoInterview/radio_box.png)  no-repeat;
				 background-position:-35px 0;
				 }

			label input[type="radio"]:checked + span{
				background-position:0 0;
				}
			
			/*多选框CSS*/
			.checkboxCheck{
				width: 470px;
				height:90px;
				margin: 0 auto;
			}
			.checkboxCheck label{
				margin-left: 50px;
			}
			.checkboxCheck label font{
				font-size: 16px;
				line-height: 47px;
   				padding-left: 4px;
			}
			
			input[type="checkbox"]{
				appearance: none; 
				-webkit-appearance: none;
				outline: none;
				display:none;
				}

			label{
				display:inline-block;
				cursor:pointer;
				}

			label input[type="checkbox"] + span{
				float: left;
				 width:35px;
				 height:39px;
				 display:inline-block;
				 background:url(images/videoInterview/radio_box.png)  no-repeat;
				 background-position:-35px 0;
				 }

			label input[type="checkbox"]:checked + span{
				background-position:0 0;
				}
			
		</style>
	</head>
	<body>
			<div class="outBorder" >
				<div class="radioCheck">
					<div class="title">单选框：</div>
					<label><input type="radio" name="role" value="1"><span></span><font>面试官</font></label>
					<label><input type="radio" name="role" value="2"><span></span><font>应聘者</font></label>
				</div>
				
				<div class="checkboxCheck">
					<div class="title">多选框：</div>
					<label><input type="checkbox" name="college " value="1"><span></span><font>文科</font></label>
					<label><input type="checkbox" name="college " value="2"><span></span><font>理科</font></label>
					<label><input type="checkbox" name="college " value="3"><span></span><font>哲学</font></label>
				</div>
				
			</div>
	</body>
</html>

* ③最后稍微做下注解说明：

i 、这是我用到的点击图片（ps我也是会一点点的 *-*）

ii、起主要作用的是下面三行代码:

background:url(images/videoInterview/radio_box.png)  no-repeat; //将图片作为背景 no-repeat表示不重复

background-position:-35px 0; //图片的一半为35px，负数表示向右移动35px,初始显示没勾的框

background-position:0 0; //点击显示有勾的框

不明白的可以复制上面完整代码自己尝试一下，相信聪明的你们一试就会！

1.自定义单选框（无图纯文字）

* ①先看效果图：

* ②再献上完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>radio and checkbox_2</title>
		<style>
			.outBorder{
				top: 100px;
				width: 800px;
				height: 400px;
				margin: 0 auto;
				background: #ace0ea;
			}
			.title{
				font-size: 18px;
			}
			
			/*单选框CSS*/
			.radioCheck{
				width: 470px;
				height:90px;
				margin: 0 auto;
			
			}
			.radioCheck label {
				margin-left: 50px;
   				margin-right: 50px;
			}
			.radioCheck label font{
				line-height: 47px;
   				padding-left: 4px;
			}
			
			input[type="radio"]{
				appearance: none; 
				-webkit-appearance: none;
				outline: none;
				display:none;
				}

			label{
				display:inline-block;
				cursor:pointer;
				}

			label input[type="radio"] + span{   
				padding: 10px;
				font-size: 20px;
				font-weight: 500;
				cursor: pointer;
				}

			label input[type="radio"]:checked + span{
				color:#0797b5;
				font-size: 26px;
				}
			label input[type="radio"]:hover + span{
				color:#0797b5;
				}
			
			/*多选框CSS*/
			.checkboxCheck{
				width: 470px;
				height:90px;
				margin: 0 auto;
			}
			.checkboxCheck label{
				margin-left: 50px;
			}
			.checkboxCheck label font{
				line-height: 47px;
   				padding-left: 4px;
			}
			
			input[type="checkbox"]{
				appearance: none; 
				-webkit-appearance: none;
				outline: none;
				display:none;
				}

			label{
				display:inline-block;
				cursor:pointer;
				}

			label input[type="checkbox"] + span{
				padding: 10px;
				font-size: 20px;
				font-weight: 500;
				cursor: pointer;
				}

			label input[type="checkbox"]:checked + span{
				color:#0797b5;
				font-size: 26px;
				}
			label input[type="checkbox"]:hover + span{
				color:#0797b5;
				}
			
		</style>
	</head>
	<body>
			<div class="outBorder" >
				<div class="radioCheck">
					<div class="title">单选框：</div>
					<label><input type="radio" name="role2" value="1"><span><font>面试官</font></span></label>
					<label><input type="radio" name="role2" value="2"><span><font>应聘者</font></span></label>
				</div>
				
				<div class="checkboxCheck">
					<div class="title">多选框：</div>
					<label><input type="checkbox" name="college2" value="1"><span><font>文科</font></span></label>
					<label><input type="checkbox" name="college2" value="2"><span><font>理科</font></span></label>
					<label><input type="checkbox" name="college2" value="3"><span><font>哲学</font></span></label>
				</div>
				
			</div>
	</body>
</html>

* ③最后稍微做下注解说明：

原理和有图的基本类似，不明白的可以复制代码，直接运行浏览器调试一下即可！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端小知识

前端

自定义单选和多选框

自定义单选框和多选框 的相关文章

  • 计算机组成原理实验二 存储系统预习报告

    实验一 静态RAM 一 实验目的 掌握静态随机存储器 RAM 工作特性及数据的读写方法 基于信号时序图 了解读写静态随机存储器的原理 二 实验预习 1 阅读实验指导书 然后回答问题 实验所用的静态存储器由一片 6116 2K 8bit 构成

  • 离散信号的Matlab表示

    对任意离散序列x k 需用2个向量来表示 一个表示k的取值范围 另一个表示序列的值 例如序列x k 2 1 1 1 3 0 2 可用Matlab表示为 k 2 4 x 2 1 1 1 3 0 2 若序列从0开始 则只用一个向量x就可表示序列

  • 前端开发: 微信小程序 (文字,链接)生成二维码

    首先最主要的还是通过weapp qrcode js 靠这个轮子就可以了 GitHub yingye weapp qrcode weapp qrcode js 在 微信小程序 中 快速生成二维码https github com yingye

  • 人工智能和机器学习

    机器学习 1 什么是机器学习 在进行特定的编程的情况下 给与计算机学习能力的领域 机器学习是从数据中自动分析获得模型 并利用模型对未知数据进行预测 2 机器学习与人工智能 2 1人工智能发展的三个阶段 1980年代是正式形成时期 1990

随机推荐

  • Java接口详解

    http hi baidu com cxgfhfiupuanour item 370967f74ecbe9cca835a2b4 对初学者来说 接口不是很好理解 现将某高手的一篇文章贴出来 共大家分享 我们来看一个类 class A priv

  • 华为UOS欧拉版 K3S+Rancher 安装完全版

    文章目录 K3S服务 happy path安装过程 1 准备工作 1 1 修改网卡名称为eth0 1 2 切换yum源 1 3 关闭防火墙以及selinux 1 4 修改主机名 并修改hosts 1 5 在UOS 基于华为欧拉 上安装doc

  • vue动画之轮播图

  • Vue自定义组件——封装一个简单的可拖拽的弹出框 可拖拽的Dialog

    首先明确需要传入组件的属性 Props dialogVisible Number 非0打开 allowDrag Boolean 是否可以拖拽 noFoot Boolean 是否显示按钮行 submit Function 点击提交按钮的回调

  • Tomcat 环境变量

    到tomcat官方站点 http www apache org dist jakarta tomcat 4 下载tomcat jakarta tomcat 4 1 30 exe 下载之后安装 比如安装在D Tomcat下 安装完之后 设置环

  • AsyncResult 类的使用

    AsyncResult 类封装异步委托上的异步操作的结果 与异步委托一起使用 从该委托的 BeginInvoke 方法返回的 IAsyncResult 可以强制转换为 AsyncResult AsyncResult 具有 AsyncDele

  • 24、【C++】C++11新特性：Lamda表达式/可变参数模板

    一 Lamda表达式 Lamda表达式是C 11中引入的一项新技术 利用Lamda表达式可以编写内嵌的匿名函数 用以替换独立函数或者函数对象 并且使得代码更可读 是一种匿名函数 即没有函数名的函数 Lamda函数的语法定义如下 captur

  • 过河 【状态压缩DP】+【完整的数论推导过程】

    题目链接 题意 很多人以为青蛙是要跳到石头上 一个个往后跳 问最少需要的石头数量 其实不然 题目给的样例的确也是有些坑了 青蛙每次都有跳的距离范围 题目求的是最少会跳到的石头 青蛙可以在水中起跳 它要尽可能的避开石头 也就是问抵达终点时最少

  • git冲突（git权威指南笔记）

    快进式推送 要推送的本地版本库的提交是建立在远程版本库相应分支的现有提交基础上的 即远程版本库相应分支的最新提交是本地版本库最新提交的祖先提交 查看本地版本库的最新提交及历史提交 git rev list HEAD 查看远程版本库的引用对应

  • MATLAB角谱传播实现！FFT2光斑实际尺寸是多少？

    作者B站ID 大洋咩咩咩咩 投稿有对该代码的讲解视频 角谱传播 如果有那个地方有疑问可以去视频中寻找答案 文章及代码解决三个问题 夫琅禾费衍射 理想凸透镜成像 做FFT2后 仿真光斑的实际尺寸确定 光场在自由空间传播一定距离z后的光斑什么样

  • 求数组中的第三大数

  • java将时间按月分段

    java将时间按月分段 返回分段的数组 按照月份分割一段时间 param startTime 开始时间戳 毫秒 param endTime 结束时间戳 毫秒 public static List

  • 关于Element-ui中Table表格无法显示的问题及解决

    Element ui中Table表格无法显示 1 准备工作 2 引用Element ui官方文档中的Table表格代码 3 启动端口 并在浏览器访问 Element ui表格不生效问题 原因是 Element ui中Table表格无法显示

  • linux设备模型之bus，device，driver分析一

    本文系本站原创 欢迎转载 转载请注明出处 http www cnblogs com gdt a20 内核的开发者将总线 设备 驱动这三者用软件思想抽象了出来 巧妙的建立了其间的关系 使之更形象化 结合前面所学的知识 总的来说其三者间的关系为

  • vscode删除缩进多行tab

    shift tab 转载于 https www cnblogs com v5captain p 9160398 html

  • chrome扩展开发（2）- manifest.json文件简述

    一 本文目标 结合具体应用场景 让读者对manifest json文件的写法和主要属性拥有初步认识 二 目标读者 chrome扩展开发的初学者 想要先从宏观上了解一下chrome扩展能干哪些事情 而不是急于写出一个能运行的demo的人 三

  • 密码学 ~ 数字签名

    概念 数字签名 又称公钥数字签名 是只有信息的发送者才能产生的别人无法伪造的一段数字串 这段数字串同时也是对信息的发送者发送信息真实性的一个有效证明 它是一种类似写在纸上的普通的物理签名 但是使用了公钥加密领域的技术来实现的 用于鉴别数字信

  • PyCharm调试代码的时候出现pydev debugger: process xxxx is connecting

    最近在初学python的时候 在使用PyCharm调试代码的时候出现 pydev debugger process xxxx is connecting 和 Process finished with exit code 0 从从其返回的状

  • matlab神经网络训练图解释,matlab实现神经网络算法

    matlab 神经网络 net newff pr 3 2 logsig logsig 创建一个bp神经网络 10 显示训练迭代过程 0 05 学习速率0 05 1e 10 训练精度net trainParam epochs 50000 最大

  • 自定义单选框和多选框

    说明 作为一个Java后端程序员 有时候也需要自己去写些前端代码 所以将工作中用到的一些小知识做记录分享 1 自定义单选框 有图片 先看效果图 再献上完整代码

热门标签