单选框,复选框美化(纯css)

最新推荐文章于 2023-12-28 19:58:11 发布
最新推荐文章于 2023-12-28 19:58:11 发布
阅读量524 收藏 4
点赞数
分类专栏： 前端 文章标签： 单选框美化 复选美化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/millet_handsomes/article/details/87631970
版权

单选框,复选框美化

废话不多说先上图


接着是代码

index.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" />

<style type="text/css">
body {
	font: 14px/150% microsoft yahei,tahoma;
	}
.clear {
	clear: both
	}
.RadioStyle input {
	display: none
	}
.RadioStyle label {
	border: 1px solid #00a4ff;
	padding: 2px 10px 2px 5px;
	line-height: 28px;
	min-width: 80px;
	text-align: center;
	float: left;
	margin: 2px;
	border-radius: 4px
	}
.RadioStyle input:checked + label {
	background: url(images/ico_checkon.svg) no-repeat right bottom;
	background-size: 21px 21px;
	color: #00a4ff
	}
</style>

<title>纯CSS 单/复选框 美化</title>
</head>
<body>

单选框

<div class="RadioStyle">
    <div class="Block PaddingL">
        <input type="radio" name="Storage" id="model1" />
        <label for="model1">单选框A</label>
        <input type="radio" name="Storage" id="model2" />
        <label for="model2">单选框B</label>
        <input type="radio" name="Storage" id="model3" />
        <label for="model3">单选框C</label>
        <input type="radio" name="Storage" id="model4" checked />
        <label for="model4">单选框D</label>
    </div>
</div>

<div class="clear"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
多选框

<div class="RadioStyle">
    <div class="Block PaddingL">
        <input type="checkbox" id="love1" />
        <label for="love1">多选框1</label>
        <input type="checkbox" id="love2" />
        <label for="love2">多选框2</label>
        <input type="checkbox" id="love3" />
        <label for="love3">多选框3</label>
        <input type="checkbox" id="love4" checked />
        <label for="love4">多选框4</label>
    </div>
</div>

<div class="clear"></div>
</body>
</html>

svg图

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="ico_checkon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00A4FF;}
	.st1{fill:#FFFFFF;}
</style>
<g>
	<g>
		<polygon class="st0" points="42,42 42,0.5 0.5,42 		"/>
	</g>
</g>
<path class="st1" d="M19.4,26.9l8.5,8.5L25,38.2l-8.5-8.5L19.4,26.9z M36.4,21.2l2.8,2.8L25.1,38.2l-2.8-2.8L36.4,21.2z"/>
</svg>
millet_handsomes
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯css3单选框和复选框样式美化效果
12-13
现在是告别单调的html单选框和复选框样式的时候了，这款纯css3单选框和复选框美化效果为您提供了解决方案。该css美化效果简洁大方，动画效果一流，堪称极品。
handsome主题美化优化备忘录 - 持续更新
weixin_62080171的博客
11-08 627
打开后台-更改外观-设置外观-初级设置-复制代码粘贴至博主的介绍即可r > i;c.step?
基于Handsome主题的站点页脚美化教程
一个分享技术的个人博客
09-11 1103
导读 很多基于Typecho平台的主题，在页脚信息展示方面，其样式都过于单调，对于追求美观的人来说，这是难以接受的。 下面以 Handsome 主题为例，讲解一下如何美化页脚，话不多说，直接看前后效果对比： 魔改步骤 Step1: 将以下内容添加至 外观设置 >> 开发者设置 >> 博客底部左侧信息 下： 注意：内容需根据个人站点稍作调整。 <div class="github-badge"> <span class="badge-subject"&gt
使用雨云服务器安装Handsome主题，美化记录
2301_80190818的博客
10-11 225
接上一篇，我们已成功安装typecho程序来「强力驱动」我们网站这一期我们来美化自己的网站。
[ 2022年4月8日更新 ]Typecho Handsome主题美化教程
qq_34185638的博客
04-05 3372
Typecho Handsome主题美化教程
纯CSS单复选框选中美化特效
07-14
这篇文章将深入探讨如何利用纯CSS技术对单选框和复选框进行美化，并实现独特的交互效果。 首先，我们了解基础的HTML结构。一个单选框（radio button）和复选框（checkbox）通常由`<input>`标签配合`<label>`标签...
jQuery单选框复选框美化代码
06-24
jQuery单选框复选框美化代码正是为了解决这个问题，它提供了一套精致的单选和复选组件，可以极大地提升表单的视觉效果。 jQuery库是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在这...
jQuery单选框和复选框美化代码
11-30
在“jQuery单选框跟复选框美化代码”这个压缩包中，很可能包含了实现上述功能的示例代码。通常，它会包含HTML文件用于展示页面结构，CSS文件用于定义样式，以及JavaScript文件（可能是jQuery库和自定义脚本）用于...
CSS3复选框和单选按钮美化特效代码
03-20
本文将深入探讨如何使用CSS3对复选框（checkbox）和单选按钮（radio button）进行美化，以创建更具吸引力的表单元素。 首先，复选框和单选按钮是网页交互中常见的组件，用于收集用户的选择信息。它们通常以简单的...
前端修改单选框和多选框的样式（美化）
weixin_51609337的博客
06-27 2204
【代码】前端修改单选框和多选框的样式（美化）
单选框_复选框美化插件
08-05
单选框_复选框美化插件
纯CSS实现的卡片切换效果
06-01
这是一款纯 CSS 实现的卡片切换效果，原理是通过单选按钮 radio 选择不同的按钮后，再使用 CSS 选择器选中对应的内容显示。
handsome对应php文件,基于handsome主题的一些美化总结
weixin_36215736的博客
03-13 945
用了handsome主题有一段时间了，挺不错的主题!在无数次更换各种博客程序后最终还是选择使用Typecho&Handsome主题搭建博客如果长久发展的话建议就用wordpress进入正题:代码没标明的都是添加至handsome主题后台主题设置 自定义CSS。首页头像转动并放大.thumb-lg{width:130px;}.avatar{-webkit-transition: 0.4s;-...
基于handsome主题的一些美化修改
twelvecoder
08-07 4528
用了handsome主题有一段时间了，今天对主题进行了一些修改，修改完成后几乎看不出主题被修改了，因为只是添加了一些鼠标悬停样式，感觉白忙活了。 目前已对最新版本6.0进行修改，其他版本部分样式会失效 为了减少对源码的修改，本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。 1. 头像呼吸光环和鼠标悬停旋转放大 .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-o.
纯css美化单选与复选框
软件开发
09-07 613
【代码】纯css美化单选与复选框。
（切图笔记）通用的纯css3实现 单选框radio复选框checkbox的美化 附代码 亲测好用
最新发布
qietuwang的博客
12-28 1131
切图笔记记录切图网日常，说到网页的表单美化 通常需要用到插件，因为 select，radio，checkbox比较特殊，无法通过css直接美化 ，这些也有比较不错的美化插件 可以实现，不过这都是早几年的情况，现在浏览器日益更新升级，对于html5 css3标准支持的更好，使得我们现在可以通过css3也可以进行美化，没有插件参与，就可以省事不少，同时也可以让页面代码更加简洁，用到了图片背景，不过是基于data：image 方式直接引用的，所以不用到实体图片。复制以下代码即可实现 单选 复选美化，亲测好用。
美化表单元素之单选框的美化
niannianxi的博客
03-31 448
      在html的表单元素中我们可以采用下列代码生成单选框： <label> <input type="radio" name="radio" checked> <span>男</span> </label> <label> <i...
html5单选框美化,使用CSS美化radio和checkbox
weixin_33737110的博客
06-03 490
单选框Radio和多选框checkbox需要美化吗？当然，原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化，我们有借 助Javascript来做美化的，也有直接用CSS来美化的，今天我给大家介绍使用纯CSS实现radio和checkbox的美化。我们知道，很多使用JS来美化表单控件的方法都不是很理想，需要借助引入js和css，有的甚至使用图片和字体图标，而且还要依赖jQuery，...
php单选框 美化,单选、复选样式美化的图文详解
weixin_36288711的博客
03-11 356
这次给大家带来单选、复选样式美化的图文详解，单选、复选样式美化的注意事项有哪些，下面就是实战案例，一起来看一下。前言相信大家都知道在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单，本文中实现的效果非常不错，感兴趣的朋友们下面来...
layui单选框怎么用
05-23
在 layui中，单选框使用的是复选框的组合。可以通过以下步骤来使用单选框： 1. 引入layui的相关文件。 ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ``` 2. 创建HTML结构 ```html <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="checkbox" name="sex" title="男" lay-skin="primary"> <input type="checkbox" name="sex" title="女" lay-skin="primary"> </div> </div> ``` 注意：name属性的值必须相同，title属性为选项显示的文本。 3. 初始化单选框 ```javascript layui.use('form', function(){ var form = layui.form; //监听单选框 form.on('checkbox', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中，true或者false console.log(data.value); //复选框value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 }); }); ``` 通过以上操作，就可以使用layui实现单选框了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值