自定义单选框和多选框

最新推荐文章于 2024-05-23 15:36:14 发布
最新推荐文章于 2024-05-23 15:36:14 发布
阅读量1.8k 收藏 2
点赞数 3
分类专栏： 前端小知识 文章标签： 前端 自定义单选和多选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39588630/article/details/82771328
版权

说明:作为一个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>

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

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

LRB_Len
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS实现自定义单选框和复选框
RaAutoit的博客
09-17 1536
要实现自定义单选框，我们需要使用HTML的元素，并使用CSS来定义其外观。DOCTYPE html > < html > < head > < style > /* 隐藏原始单选框 */ input[type="radio"] {} /* 定义自定义单选框的样式 */ .custom-radio {} /* 定义选中状态的样式 */ input[type="radio"]:checked + .custom-radio {
Bootstrap3 内联单选和多选框
08-31
在Bootstrap3中，内联单选和多选框是两种常见的交互元素，它们允许用户在一组预定义的选项中进行选择。本文将深入探讨如何使用Bootstrap3实现内联单选和多选框，并分享一些相关的使用技巧。 首先，内联单选按钮...
纯CSS 自定义单选框与多选框
weixin_40003755的博客
01-04 2248
很多时候需要自定义单选，多选，用css自定义来帮助我们解决这个问题
有趣的css - 动态勾选多选框效果
最新发布
设计师工作日常
05-23 959
自定义多选框外观，用css实现一个动态勾选多选框按钮，适用于表单中用户勾选多选择项场景，可以有效增加用户交互体验。
微信小程序中自定义单选框/多选框样式
热门推荐
motor_tang的博客
01-09 1万+
微信小程序中自定义单选框/多选框样式 1.先看多选框 具体代码如下 (1).wxml代码 // .wxhtml代码(只是一部分) &amp;lt;checkbox-group class='checkboxList' bindchange=&quot;checkboxChange&quot;&amp;gt; &amp;lt;label class=&quot;checkbox&quot; wx:for=&quot;{{filterList}
html5定义一个选择框,纯CSS实现自定义单选框和复选框功能
weixin_42181545的博客
06-03 1251
1 实现效果2 知识点讲解2.1 标签在html中，标签通常和标签一起使用，标签为input元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果，标签的作用是为鼠标用户改进了可用性，当用户点击标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。标签语法格式：...
纯CSS实现自定义单选框和复选框
AlbertYang的博客
07-14 5755
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #main { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .
Flutter 自定义单选按钮和自定义复选框
半身风雪
11-21 2826
在日常开发中，很多时候系统自带的单选按钮，复选框无法满足我们的需求，那么就需要自定义样式的按钮，本篇文章将记录如何自定义单选按钮，复选框。
input 纯CSS 自定义 单选框/多选框 样式
freedomVenly的博客
10-19 1320
备忘，直接上代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;样式&amp;lt;/ti
微信小程序-自定义多选框、单选框样式
weixin_42941628的博客
04-20 881
【代码】微信小程序-自定义多选框、单选框样式。
单选框的多选框样式
心若向阳 无谓悲伤
07-22 1147
前言：有些需求是想要单选的效果，但希望是多选框的样式。也可以说是，多选框实现单选的功能。所以我们来实现一下 1.首先，我们来看一下默认情况下的单选框，代码及效果图如下： 请选择您喜欢的水果：<br> <input type="radio" name="fruits" id="banana" value="香蕉" class="radio" checked="ch...
纯CSS实现自定义单选框和复选框功能
12-28
1 实现效果 2 知识点讲解 ...标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。 标签语法格式： 关联控件的id xss=removed>
css3自定义单选多选框
06-01
综上所述，利用CSS3，我们可以轻松地为网页设计出美观且实用的自定义单选框和多选框，提升用户体验，这也是现代前端开发中的一个重要技能。通过不断实践和创新，我们可以创造出更多富有个性和交互性的网页元素。
jQuery自定义单选按钮复选框样式特效
06-10
"jQuery自定义单选按钮复选框样式特效"是一个针对初学者的简单教程，它演示了如何利用jQuery库对网页中的基本表单元素，如单选按钮（radio button）和复选框（checkbox），进行美化和功能增强。下面我们将详细探讨这...
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
01-30
以上步骤基本涵盖了纯CSS实现自定义多选框和单选框颜色的方法。在实际项目中，你可能还需要考虑更多的细节，比如响应式设计、触屏设备的交互以及更复杂的图形设计。通过不断的实践和优化，可以创建出既美观又实用的...
点击切换Css样式
Len
09-21 1万+
说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。 * ①先看效果图： i、初始  ii、点击切换样式 * ②代码展示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击切换Cs...
鼠标悬停出现遮罩或图片放大效果
Len
09-20 6678
说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。 1.鼠标悬停出现遮罩效果 * ①先看效果图： * ②再献上完整代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; li {...
日历表（点击每一日获得当日日期）
Len
09-19 2842
说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。 *日历制作说明： 应业务要求：页面需展示一个日历表，并根据点击日期获取所需的当天数据，并显示在页面。 *日历效果展示图： *日历来历说明： i、该日历整体框架是我从网上下载； ii、自己根据项目需求与项目页面更改了部分Css与Js; iii、在此得感谢网上无私奉献的...
html使用css修改 单选框和多选框的 选择框的样式 大小尺寸
06-08
可以使用 CSS 来修改单选框和多选框的选择框样式和大小尺寸。下面是两种常见的方法： 1. 使用伪元素来创建自定义的选择框，并将原生的选择框隐藏起来。示例代码如下： ```html <span class="checkbox"></...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值