自定义elemetui中el-radio 的样式

最新推荐文章于 2025-06-13 11:22:54 发布

User_XuKang

最新推荐文章于 2025-06-13 11:22:54 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js html css3

本文链接：https://blog.youkuaiyun.com/User_XuKang/article/details/123376642

本文介绍了如何在Vue.js项目中自定义Element UI的el-radio组件样式，通过HTML和CSS3实现视觉效果的改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认的样子

自己修改的样式代码如下

<template>
	<div class="placeOrder">
		<el-radio-group v-model="radio" size="small">
			<el-radio label="1" border>备选项1</el-radio>
			<el-radio label="2" border>备选项2</el-radio>
		</el-radio-group>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				radio: '1'
			};
		}
	}
</script>
<style scoped="scoped" lang="scss">
	.placeOrder {
		/deep/.el-radio__input {
			display: none;
		}
		/deep/.el-radio.is-bordered.is-checked::before {
			content: "";
			display: block;
			background-image: url(../../assets/image/radio.png);
			width: 11px;
			height: 12px;
			position: absolute;
			bottom: 0;
			right: 0;
		}
		/deep/.el-radio.is-bordered {
			padding: 0 15px;
			height: 26px;
			line-height: 26px;
		}
		/deep/.el-radio__label {
			padding-left: 0;
		}
		/deep/.el-radio {
			margin-right: 0px;
		}
	}
</style>

效果图