单选框美化css

Aa董小礼

于 2019-09-24 11:41:23 发布

阅读量563

点赞数

分类专栏： css 小技巧 5+app

本文链接：https://blog.youkuaiyun.com/a1076454380/article/details/101274088

版权

小技巧同时被 3 个专栏收录

22 篇文章

订阅专栏

5+app

14 篇文章

订阅专栏

css

4 篇文章

订阅专栏

input[type=radio] {
		display: inline-block;
		vertical-align: middle;
		width: .4rem;
		height: .4rem!important;
		-webkit-appearance: none;
		background-color: transparent;
		border: 0;
		outline: 0 !important;
		color: #d8d8d8;
		line-height: .4rem;
		margin: 0 .3rem!important;
	}
	
	input[type=file] {
		opacity: 0;
	}
	
	input[type=radio]:after {
		content: "✓";
		display: block;
		width: .4rem;
		height: .4rem;
		border-radius: 50%;
		text-align: center;
		line-height: .4rem;
		color: #fff;
		border: 1px solid #ddd;
		background-color: #fff;
		box-sizing: border-box;
	}
	
	input[type=radio]:checked:after {
		border-color: #00c6c8;
		background-color: #00c6c8;
	}