elementUI解决el-checkbox自定义样式

最新推荐文章于 2025-06-23 10:53:00 发布

原创最新推荐文章于 2025-06-23 10:53:00 发布 · 1.2w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

55 篇文章

订阅专栏

博客介绍了Vue的默认样式（三种）和自定义样式，给出了实现代码，包括HTML和CSS部分，还提到在scoped里需加上 /deep/。

默认样式（三种）：

自定义样式：

实现代码：

HTML:

<div class="formCss" style="margin-top: 20px">
	<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
		<el-form-item label="选择日期：">
			<el-date-picker
				v-model="sizeForm.timeDate"
				type="month"
				size="mini"
				placeholder="选择月">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="指标">
			<div class="mb18">
				<el-radio-group v-model="sizeForm.dayMonth" size="mini">
					<el-radio-button 
						v-for="item in dayMonthList"
						:key="item.value"
						:label="item.value"
						class="ml10"
						:disabled= item.value==2 >{{ item.label }}</el-radio-button>
				</el-radio-group>
			</div>
			<div class="mb18">
				<el-checkbox-group v-model="sizeForm.userType" size="mini" @change="handleCheckedCitiesChange(1)"> 
					<el-checkbox-button
						v-for="item in userTypeList"
						:key="item.value"
						:label="item.value"
						class="ml10">{{ item.label }}</el-checkbox-button>
				</el-checkbox-group>
			</div>	
       </el-form-item>
  </el-form>
</div>

CSS:

.formCss .el-radio-button__inner,.formCss .el-radio-button:first-child .el-radio-button__inner,.formCss .el-checkbox-button__inner,.formCss .el-checkbox-button:first-child .el-checkbox-button__inner{
   border: 1px solid #DCDFE6;
   border-radius: 4px !important;
 }
.formCss .el-radio-button__orig-radio:checked + .el-radio-button__inner{
   background:#409EFF;
 }

enenen~ 就这.........

如果你在scoped里面就加上 /deep/

.formCss /deep/ .el-radio-button__inner,.formCss /deep/ .el-radio-button:first-child .el-radio-button__inner,.formCss /deep/ .el-checkbox-button__inner,.formCss /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner{
   border: 1px solid #DCDFE6;
   border-radius: 4px !important;
 }
.formCss /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner{
   background:#409EFF;
 }