element-ui 去掉 el-radio 标签前面的小圆点。(样式无需写在全局样式中)

本文介绍了如何在Vue应用中通过CSS样式修改,具体是使用/deep/选择器配合ID选择器#defaultImages来隐藏el-radio组件内的小圆点,从而达到定制 radio 按钮视觉效果的目的。

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

问题:

用vue中的el-radio标签。效果如下图,那个小圆点很碍眼,需要想办法去掉

解决

1、给el-radio标签所在el-row 标签命名为 id="defaultImages"

<el-row id="defaultImages" :gutter="20" class="xuanzhe" >
          <el-col :span="2"><div class="grid-content bg-purple gjxx-wz">
            解决方案
          </div></el-col>
          <el-col :span="22"><div class="grid-content bg-purple">
            <el-radio-group v-model="radio">
              <el-radio :label="3">智慧教育</el-radio>
              <el-radio :label="6">智慧停车场</el-radio>
              <el-radio :label="9">智慧农业</el-radio>
            </el-radio-group>
          </div></el-col>
        </el-row>

2.在组件的局部css样式中写样式(不需要写在全局样式中)

 <style lang="less" scoped>
/*去掉radio的小圆点*/
 /deep/#defaultImages .el-radio__input{
   display: none !important;
 }

要在el-carousel中选中小圆点,你可以使用自定义指示器样式来实现。根据引用\[2\]中的代码,你可以添加以下样式来自定义指示器的外观: ```css .el-carousel__indicator--horizontal .el-carousel__button { width: 10px; height: 10px; background: transparent; border: 1px solid #ffffff; border-radius: 50%; opacity: 0.5; } .el-carousel__indicator--horizontal.is-active .el-carousel__button { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 1; } ``` 将这些样式添加到你的CSS文件中,或者直接在你的Vue组件中的`<style>`标签中添加。这样,当你使用el-carousel时,选中的小圆点将会显示为白色,并且具有不同的样式以区分选中和未选中状态。 #### 引用[.reference_title] - *1* [教程6 Vue3+Element Plus el-carousel制作轮播图](https://blog.csdn.net/boxuestudio/article/details/129099623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue+elementUI 走马灯自定义(指示器设为圆点,设置手动滑动切换)](https://blog.csdn.net/Thea12138/article/details/123082968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值