关于elementUI的单选框图标修改

最新推荐文章于 2024-06-19 15:29:29 发布

略泛

最新推荐文章于 2024-06-19 15:29:29 发布

阅读量4.7k

点赞数 3

分类专栏： elementui 文章标签： vue-cli3 elementui

本文链接：https://blog.csdn.net/qq_46899903/article/details/109535498

版权

elementui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在vue中关于elementUI的单选框图标修改，实战跳坑
1.在src中创建公共css样式文件restCss.css
2.在其中修改

//点击前的样式
.el-radio__inner{
	border-radius:0;
		width: 20px;
	    height: 20px;
		border: 1px #000000 solid;
}
//点击后的样式
.el-radio__inner::after {
	
	border: 1px #000000 solid;
	width: 22px;
	height: 22px;
	//让圆框变成方框
	border-radius: 0;
	//点击后方框中的图片
	background-image: url(icons/勾.png);	
	//图片适应方式 
	///background-size：contain，
	//background-size:150px 80px;
	//background-size:cover;
	//background-size:40% 60%;
	
}
//点击后的字体颜色
.el-radio__input.is-checked+.el-radio__label {
    color: #0e0e0e;
}

3.在main.js中引用改css

import ‘@/restCss.css’