css修改浏览器默认的radio单选按钮

最新推荐文章于 2023-04-20 17:01:38 发布

CODERAF

最新推荐文章于 2023-04-20 17:01:38 发布

阅读量412

点赞数 1

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_44898394/article/details/127124319

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用CSS来定制input[type='radio']的选择框样式，包括设置边框颜色、背景色、圆角以及选中后的变化。通过background-clip属性实现背景仅填充内容区域的效果，使得样式更加精致。

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

input[type="radio"] {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(40, 153, 254, 1);
	vertical-align: bottom;
	background: #FFFFFF;
	-webkit-appearance: none;/*隐藏原来的样式*/
}
			
input[type="radio"]:checked {
	border: 1px solid rgba(40, 153, 254, 1);
	padding: 3px;
	background: #2899FE;
	background-clip: content-box;/*设置元素的背景只包含内容，不包含padding*/  
}