CSS优化单选多选按钮样式（2）

最新推荐文章于 2023-08-15 17:04:31 发布

骆小胖

最新推荐文章于 2023-08-15 17:04:31 发布

阅读量763

点赞数

分类专栏：笔记随笔教学笔录学生提问常见特效 CSS 文章标签：笔记随笔教学笔录学生提问常见特效 CSS

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819082

版权

笔记随笔同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

CSS

29 篇文章 0 订阅

订阅专栏

【前言】

本文简单介绍下如何优化自定义单选多选按钮的样式。

之前介绍过一种方法，利用伪元素添加选中后的√和圆点--content内填入css特殊字符表。

这两天学生做项目，将项目里遇到的特效简单讲解下。这里做下备注，课程大纲适当调整。

【主体】

因为特殊字符表在某些低版本浏览器展示容易出现问题，所以这里再介绍一种方案--->伪元素+画长方形+旋转

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		input[type="checkbox"]{
			vertical-align: middle;
			display: none;
		}
		input[type="checkbox"]+label{
			display: inline-block;
			width: 20px;
			height: 20px;
			border:1px solid rgba(0,0,0,0.3);
			vertical-align: middle;
			position: relative;
		}
		/*伪元素+特殊字符
		input[type="checkbox"]:checked+label:after{
			content: "\2713";
			position: absolute;
			top: 0;
			left: 0;
			color: white;
			background: #1a71dd;
			font-weight: bold;
			display: inline-block;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 20px;
		}
		*/
		/*伪元素+画长方形+旋转*/
		input[type="checkbox"]:checked+label:after{
			content: "";
			width: 12px;
			height: 7px;
			border:1px solid red;
			border-color: transparent transparent red red;
			position: absolute;
			left: 47%;
			top: 37%;
			transform: translate(-50%,-50%) rotate(-58deg);
		}
	</style>
</head>
<body>
	<input id="chinese" type="checkbox" name=""><label for="chinese"></label>语文
	<input id="math" type="checkbox" name=""><label for="math"></label>数学
</body>
</html>

骆小胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS优化单选多选按钮样式（2）

css特殊字符表。这两天学生做项目，将项目里遇到的特效简单讲解下。这里做下备注，课程大纲适当调整。【主体】因为特殊字符表在某些低版本浏览器展示容易出现问题，所以这里再介绍一种方案---&gt;伪元素+画长方形+旋转 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&a
复制链接

扫一扫