纯css渲染单选框、复选框

最新推荐文章于 2022-10-24 10:16:02 发布
最新推荐文章于 2022-10-24 10:16:02 发布
阅读量230 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39365923/article/details/104836096
版权

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
<script src="js/jquery.min.js"></script>
<style type="text/css">
body {
	font: 14px/150% microsoft yahei,tahoma;
}

.MyInputStyle input {
	display: none;
}
.MyInputStyle label {
	border: 1px solid #CCC;
	color: #666;
	padding: 2px 10px 2px 5px;
	line-height: 28px;
	min-width: 80px;
	text-align: center;
	float: left;
	margin: 2px;
	border-radius: 4px
}
.MyInputStyle input:checked + label {
	background: url(img/ico_checkon.svg) no-repeat right bottom;
	border: 1px solid #00a4ff;
	background-size: 21px 21px;
	color: #00a4ff
}
.MyInputStyle input:disabled + label {
	opacity: 0.7;
}
</style>

<title>纯CSS input/checkbox-radio 美化</title>
</head>
<body>

<p>请选择友商（加上name属性就是单选框（必须）,去掉则是多选框,id是必须属性,class属性为了点击事件加的）</p>

<div class="MyInputStyle">
	<input type="radio" name="company" id="dealer1" value="huawei"/>
	<label for="dealer1">华为</label>
	<input type="radio" name="company" id="dealer2" value="xiaomi"/>
	<label for="dealer2">小米</label>
	<input type="radio" name="company" id="dealer3" value="tengxun"/>
	<label for="dealer3">腾讯</label>
	<input type="radio" name="company" id="dealer4" checked value="alibaba"/>
	<label for="dealer4">阿里</label>
</div>

<br/>
<br/>
<p>选择兴趣爱好</p>

<div class="MyInputStyle">
    <div class="Block PaddingL">
        <input type="checkbox" id="hobby1" class="hobby" value="java"/>
        <label for="hobby1">Java</label>
        <input type="checkbox" id="hobby2" class="hobby" value="html"/>
        <label for="hobby2">HTML</label>
        <input type="checkbox" id="hobby3" class="hobby" value="python"/>
        <label for="hobby3">Python</label>
        <input type="checkbox" id="hobby4" checked class="hobby" value="c++"/>
        <label for="hobby4">C++</label>
    </div>
</div>
<br/>
<br/>
<input type="button" id="demo" value="获取选择的值"/>

<br/>
<br/>

<p>禁止属性</p>
<div class="MyInputStyle">
    <div class="Block PaddingL">
        <input type="checkbox" id="bare" checked disabled />
        <label for="bare">秃头</label>
        <input type="checkbox" id="hair" disabled />
        <label for="hair">长发</label>
    </div>
</div>
<script>
	$("#demo").click(function(){
		// 单选框点击值
		var singleVal = $("input[name='company']:checked").val();
		//多选框点击值
		var doubleVal=new Array();
		$(".hobby:checked").each(function(){
			doubleVal.push($(this).val());//向数组中添加元素
		});
		alert("单选值：【"+singleVal+"】===多选值：【"+doubleVal+"】");
	});
</script>
</body>
</html>

效果图

在这里插入图片描述

图片

图片素材链接下载

ww6933
关注
专栏目录
CSS3渲染Checkbox实现3D开关切换按钮
08-02
利用checkbox结合CSS3来实现一个3D开关切换按钮，该CSS3按钮一共有4款不同的样式风格，有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单，原型是一个checkbox，然后利用CSS3属性来渲染checkbox，从而实现3D按钮的效果。
单选框根据点击来渲染或者隐藏时间框
Yany的博客
03-03 125
点击长期有效时不显示input框，点击截止至时显示input框
jq如何获取后端数据渲染输入框和单选框
别来...无恙*的博客
05-19 1428
前言： 需要做一个使用jq实现的表单功能，并把后端返回的数据渲染到表单上。但使用惯了Vue的书写方式就忘记了jq的书写方式，导致单选框以及获取单选框的值作为参数无法实现。 实现方法： 如果不想在js上渲染节点的话我们可以在节点上设置一个id，然后把值赋值给id即可。 如需设置单选框的值，可以使用$("input[name=pool][value=" + json.pool + "]").attr("checked", true); 进行设置，这样即可拿到后端数据渲染单选框。 <table id='ta
纯CSS实现checkbox的样
qq_35504206的博客
04-18 696
css样式：#check_css3 span {position: relative;} #check_css3 .input_check {position: absolute;visibility: hidden;} #check_css3 .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1p...
对于复选框总是无法渲染上的问题
qq_44866462的博客
04-23 829
对于复选框总是无法渲染上的问题，原因是后端返回的数据res 以前处理方法 this.list=res.data; for(var i=0;i<this.list.length;i++){ this.list[i].isActive=false; } 这样总是无法渲染，后来改为 for(var i=0;i<res.data.length;i++){ res.d...
CSS3实例分享--超炫checkbox复选框和radio单选框
09-25
首先，我们来看如何通过纯CSS3来实现超炫的复选框和单选按钮。在这篇文章中，作者展示了如何不使用JavaScript，仅利用CSS3的特性来设计这些表单控件。对于复选框，我们能够通过使用`:checked`伪类来改变其外观，当复...
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
最新发布
01-30
1. **CSS伪类选择器**：CSS中的`:checked`伪类是关键，它允许我们根据复选框或单选按钮是否被选中来应用不同的样式。例如： ```css input[type="checkbox"]:checked { /* 添加选中状态的样式 */ } ``` 2. **隐藏...
纯CSS自定义复选框和单选输入类型
04-03
总结来说，通过熟练运用CSS选择器、伪元素、过渡效果以及`aria`属性，我们可以创造出既美观又易于使用的自定义复选框和单选按钮。这种纯CSS的方法不仅提高了网页设计的灵活性，还能够提升用户体验。在实际项目中，...
推荐11款jQuery开发的复选框和单选框美化插件
01-19
web开发中所有的输入控件中复选框和单选框的样式是最难去设计的，因为不同的浏览器及其操作系统对于样式的渲染展现是不一样的。但是在jQuery的帮 助下我们可以整体的改变他们的样式。这里我们将介绍12款实用的美化...
选择后将所选值传到文本框
我爱骑呆马的专栏
06-03 406
$(document).ready(function(){ $(".field").change(function(){ $('.field1').val($(".field").val()); }); }); Enter your name: Car: Volvo Saab Fiat Audi
js:案例 关于单选框 的 问题（部分）
weixin_59519449的博客
09-07 219
思路： 第一步：获取DOM元素， 第二步：获取value值，进行for 循环 第三步：将存储的标识 转换成页面渲染中文 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <div> <label.
checkbox点击后未渲染解决方案
03-12 2713
elementui 中 checkbox点击未渲染的问题 在elementui中，使用checkbox做点选时 点击后参数已修改但是未渲染样式，还是点击前状态 可以使用下方的方法强制刷新，完成checkbox多选框的重新渲染。 this.$forceUpdate(); 示例 <el-checkbox border v-model="item.ischecked" @change="handleCheckedChange(item)"> {{item.remark}}
checkbox 动态修改属性但是不渲染的问题
qq_42900469的博客
10-24 906
checkbox 重新渲染
vue：手写一个单选框/多选框
好幸运
09-13 968
一、效果： 二、代码： <template> <div> <div id="main"> <h1>多选</h1> <div class="wrap"> <input type="checkbox" name="1" id="item1" /> <label for="item1"> <div cla.
关于vue如何动态渲染单选框（radio）同时动态渲染页面
weixin_44811540的博客
10-27 5460
关于vue如何动态渲染单选框（radio）同时动态渲染页面 自己做的一个练习，这里记录一下。 首先是template部分 <template> <div class="hello"> <div v-for="item in msg" :key='item'>//首先循环渲染列表 <input type="radio" :id="it...
【layui】表单元素radio不显示渲染
热门推荐
柠檬加冰
05-02 2万+
最近一直在使用layui，一个对程序员相对友好的前端框架，很多效果都进行了初步的封装。在使用过程中遇到最多的问题就是引用的问题，各种模板无法使用，虽然都一一百度解决。本次需要解决的问题是 layui-form表单无法渲染效果。我希望的效果是但是程序运行效果是问题分析：因为这个表单，我是使用laytpl动态插入的，因此表单中radio的效果并没有渲染上，打开调试模式可以看到正常的radio渲染结果，应
关于layui的表单控件（如下拉框、单选框）无法渲染的问题
Bibifeng的博客
07-26 7983
最近写项目用到了layui框架，在写layui表单的时候发现下拉框没有渲染出来，如下两图对比：图一为下拉框缺失，图二是理想情况 一开始是以为自己下拉框class写错了，检查了并没有什么不对，于是把官方文档的form代码扒下来放到项目中，除了文本框和按钮，其他单选框复选框下拉框都没办法渲染出来，于是乎再检查一下引用的文件，相关css和js都引进来了，不然也不会有部分控件能渲染到，上去官方文档再...
关于LayUI单选框渲染checked属性不生效的问题
YXWik的博客
07-30 3636
页面加载前端发送请求后端查询数据 查询成功的回调函数内进行对性别的单选框赋默认值 这么简单的问题结果一直赋值不上 然后再函数中去请求，赋值 发现页面赋值不成功，没有生效， 很明显属性添加上了，但是因为layui已经对其进行渲染，新添加的属性并没有生效 于是去官方文档查看 发现有个更新渲染的操作，加到赋值下面发现，问题解决了。 ...
js的form.reder()函数渲染table表格中的下拉框数据
m0_61682705的博客
03-27 2938
目录 问题描述 form.reden()函数 简单介绍一下form.reden() layui官网对于渲染页面的介绍 页面渲染 问题描述 在我的项目中遇到一个问题在table中添加输入框但是下拉输入框中没有我们的数据 如图: 看代码 : function add(data) { data.forEach((item, index) => { let a = index + 1 $('.w100').append(
jQuery美化复选框与单选框的11款实用插件
在Web开发中，复选框和单选框的样式设计常常是一项挑战，由于浏览器和操作系统对CSS渲染的差异性，设计师需应对各种兼容性问题。然而，借助jQuery的强大功能，开发者可以优雅地统一和美化这些输入控件的外观。本文将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值