Element-Ui组件 单选框(Radio,Checked) 修改点击激活时的文本颜色,填充色和边框色

这篇具有很好参考价值的文章主要介绍了Element-Ui组件 单选框(Radio,Checked) 修改点击激活时的文本颜色,填充色和边框色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

/* 选中后的字体颜色 */

/deep/ .el-radio__input.is-checked + .el-radio__label {

color: #409eff !important;

}文章来源地址https://www.toymoban.com/news/detail-590961.html

/* 选中后圆圈的背景颜色 */

/deep/ .el-radio__input.is-checked .el-radio__inner {

background: #409eff !important;

border-color: #409eff !important;

}

// 选中后小圆点的颜色

/deep/ .el-radio__input.is-checked .el-radio__inner::after {

background: #fff !important;

}

/* 选中后的字体颜色 */

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {

color: #409eff !important;

}

/* 选中后方块的背景颜色 */

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {

background: #409eff !important;

border-color: #409eff !important;

}

// 选中后对号的颜色

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {

border-color: #fff !important;

}

到了这里,关于Element-Ui组件 单选框(Radio,Checked) 修改点击激活时的文本颜色,填充色和边框色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element中一个单选框radio时的选中和取消

    案例:  当我们只有一个单选框时,需要进行选中和取消的操作,但如果不经过处理,选中后就根本取消不了。 然后我试了一下加了点击事件,这里必须要加 native  ,触发原生事件   但发现打印台每次都触发两次  然后我又在网上找,有人说点击事件改成这样 @click.native

    2024年02月13日
    浏览(30)
  • (el-radio)操作:Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用

    1、 Element-plus 提供 Radio 组件情况: 其一、 Element-ui 自提供的 Radio 代码情况为(示例的代码): 代码地址: https://element-plus.gitee.io/zh-CN/component/radio.html#按钮样式 其二、页面的显示情况为: 2、目标想修改后的情况: Radio 单选框组件成功引入 vue3 项目的过程(去除了 ts 的语法):

    2024年02月15日
    浏览(42)
  • Element UI 中使用el-cascader组件,可以选择任意一级的内容并取消单选框

    当加入checkStrictly后就会出现单选框的问题,修改样式即可;这里使用的less语法,需要有less依赖,加入样式后如果没有生效,可以放在App.vue中的样式下

    2024年02月04日
    浏览(39)
  • jq——监听input组件type=“radio“单选框的change事件——基础积累

    jq的基操,但是由于本人jq操作dom不熟悉,用vue习惯了,所以还是要记录一下jq的基操,多多积累,多多收获。 1.html代码 2.css代码 3.js代码 完成!!! 多多积累,多多收获!!! 1. attr(): 作用:获取/设置元素的属性 //获取北京节点的name属性值 var bj = $(“#bj”).attr(“name”);

    2024年02月11日
    浏览(40)
  • vue弹出的添加信息组件中 el-radio 单选框无法点击问题

    情景描述: 在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换 原因如下: 单选框要求有个默认值,因为添加和更新操作复用同一个组件,所以我在初始化时对相关进行了判定,如果为空则赋初始值 结果这样虽然实现了初始值的展示,但是就是如此造成了单选

    2024年04月10日
    浏览(37)
  • element ui 多选框内嵌套单选框

    多选框内嵌套单选框

    2024年02月10日
    浏览(26)
  • Elementui Radio单选框取消选中

            最近开发一个后台项目的时候用到了单选框,而客户的要求是默认选择一个选项,然后 点击可以取消选中 。不想自己在手写一个Radio组件,只能在elementui的单选框上修改一下下啦。 .native的作用是在给组件添加修饰符时,将修饰符转为原生的按键修饰符。在使用组

    2024年02月02日
    浏览(32)
  • Element UI自定义被禁用(disabled)的单选框的样式

    在Element UI中,如果你想自定义被禁用(disabled)的单选框的样式,可以使用以下步骤: 1.使用 ::v-deep 或 /deep/ 选择器:  这样可以更改被禁用单选框的样式。 2.定义样式: 通过定义选择器来修改禁用状态下单选框的外观。以下是一些可能的CSS属性可以自定义: 确保在你的项目中

    2024年02月04日
    浏览(30)
  • el-radio单选框,取消选中

    1.背景:在公司开发需求中有一个选择颜色的单选框(黑色,白色),每种颜色选择后均支持取消选中,可是el-radio标签不支持取消选中。 2.解决: 方法1:  方法2:换checkbox,设置max=1即可

    2024年02月14日
    浏览(33)
  • element-ui的el-tree组件实现单选功能及选择子节点,获取所有父级节点或选中所有父级节点

    el-tree是不支持单选的,可以通过选中事件进行处理,实现单选

    2024年02月14日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包