自定义单选按钮

最新推荐文章于 2023-04-30 19:35:20 发布

Kong_十六

最新推荐文章于 2023-04-30 19:35:20 发布

阅读量454

点赞数

分类专栏： # Web—CSS初级 Web—第一阶段文章标签：表单伪类自定义按钮

本文链接：https://blog.csdn.net/qq_42383764/article/details/104128504

版权

Web—第一阶段同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

Web—CSS初级

21 篇文章 0 订阅

订阅专栏

使用表单伪类制作自定义单选按钮

lable标签的作用是：点击文字时也会选中按钮。其实也可以包裹着链接与图片，当点击图片时也会点击链接。换句话说就是文字与链接绑在一起、文字与按钮绑在一起。这样用户体验会好一点，不用必须点中按钮才会选中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义单选按钮</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			label{
				position: relative;
				display: block;
				float: left;
				width: 100px;
				height: 100px;
				border: 1px solid;
				/* 同时删除掉,因为要自定义嘛 */
				overflow: hidden;
			} 
			/* 让文字span区域与lable区域一样大 */
			lable > span{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}
			/* 把按钮移除视线 */
			input{
				position: absolute;
				left: -100px;
				top: -100px;
			}
			/* 当按钮被选中的时候,设置背景色为粉色 */
			input:checked + span{
				background-color: pink;
			}
			
		</style>
	</head>
	<body>
		<label>
			<input type="radio" name="only"/>
			<span></span>
		</label>
		<label>
			<input type="radio" name="only"/>
			<span></span>
		</label>
		<label>
			<input type="radio" name="only"/>
			<span></span>
		</label>
		<label>
			<input type="radio" name="only"/>
			<span></span>
		</label>
	</body>
</html>

Kong_十六

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义单选按钮

使用表单伪类制作自定义单选按钮lable标签的作用是：点击文字时也会选中按钮。其实也可以包裹着链接与图片，当点击图片时也会点击链接。换句话说就是文字与链接绑在一起、文字与按钮绑在一起。这样用户体验会好一点，不用必须点中按钮才会选中。<!DOCTYPE html><html> <head> <meta charset="utf-8"&...
复制链接

扫一扫