更改单选多选默认样式

最新推荐文章于 2021-01-20 21:11:59 发布

xiaoma121212

最新推荐文章于 2021-01-20 21:11:59 发布

阅读量147

点赞数

分类专栏： CSS 文章标签：单选、多选框默认样式的修改

本文链接：https://blog.csdn.net/xiaoma19941027/article/details/101308931

版权

本文介绍如何修改单选和多选框的默认样式，以实现更个性化的页面效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>更改默认的单选和多选框样式</title>
	<style>
		/*单选框*/
		input[type="radio"]{
			width: 16px;
			height: 16px;
			margin:0 5px 0 20px;
			vertical-align: middle;
    		cursor: pointer;
			position: relative;
			top: 0px;
			left: 0px;
		}
		input[type="radio"]:after{
			display: block;
			content: " ";
			color: #fff;
			width: 16px;
			height: 16px;
			border-radius: 8px;
			background: yellowgreen;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		input[type="radio"]:checked:after{
			content: "✓";
			text-align: center;
		}






		/*多选框*/
		input[type="checkbox"]{
			width: 16px;
			height: 16px;
			margin:0 5px 0 20px;
			vertical-align: middle;
			cursor: pointer;
			position: relative;
			top: 0;
			left: 0;
		}
		input[type="checkbox"]:after{
			display: block;

最低0.47元/天解锁文章

xiaoma121212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
更改单选多选默认样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>更改默认的单选和多选框样式</title> <style> /*单选框*/ input[type="radio"]{ width: 16px; hei...
复制链接

扫一扫

专栏目录