单选按钮和多选按钮的样式设置

最新推荐文章于 2024-08-09 16:06:18 发布

little little

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量5.8k

点赞数

分类专栏： html 文章标签： html css 表单

本文链接：https://blog.csdn.net/songlf521/article/details/55254606

版权

本文探讨了如何使用CSS为HTML中的单选按钮和多选按钮设置样式，提供的代码示例在IE9及以上浏览器中运行良好。

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

以下代码IE9以上执行没有问题:

1、css中样式设置:

/*父元素div*/
	.choice{  
		position: relative;  
	}  
	/*label*/
	.choice .radio{  
		position: relative;  
		display: inline-block;  
		
		padding-left: 25px;  
		cursor: pointer;  
	}  
	/*label input*/
	.choice .radio input{  
		position: absolute; 
		left:-2000px; 
    	
	}  
	.choice .radio i{  
		display: block;  
		position: absolute;  
		top: 0;  
		left: 0;  
		width: 15px;  
		height: 15px;  
		outline: 0;  
		/*未选中 i border*/
		border: 1px solid #47a8c0;  
		/*未选中 i 背景*/
		background: #9cd9e8;  
		border-radius: 50%;  
		transition: border-color .3s  
		-webkit-transition: border-color .3s;  
	}  
	 /*给与input标签相邻的i标签设置伪元素*/
	.choice .radio input+i::after{  
		position: absolute;  
		content: '';  
		top: 3px;  
		left: 3px;  
		width: 9px;  
		height: 9px;  
		border-radius: 50%;