el-radio 自定义样式，字体以及背景色

最新推荐文章于 2025-06-25 14:25:33 发布

℡何必。

最新推荐文章于 2025-06-25 14:25:33 发布

阅读量6.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端 vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_44981128/article/details/121425250

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS深度选择器修改Vue框架中Radio组件的颜色、边距及选中状态下的样式。通过对::v-deep的选择器应用，实现了对el-radio__label文字颜色、边距以及el-radio__input选中状态下的背景色和边框颜色的自定义。

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

// 添加颜色类

::v-deep 深度选择器



//修改每一个label文字以及边距
   ::v-deep .el-radio__label{
      color: #ABABAB;
      margin-right:10px    
      }
//修改选中label文字
   ::v-deep .el-radio__input.is-checked + .el-radio__label {
       color: #2E2E2E !important;
   }
//修改选中radio背景色、边框
   ::v-deep .el-radio__input.is-checked .el-radio__inner {
       background: #585858 !important;
       border-color: #585858 !important;
   }