修改框架中的默认样式:例如修改iview组件库中Input组件获取焦点以及鼠标悬停时的蓝色边框

问题描述:

  1. 使用iview组件库时,其中的Input输入框、select下拉选择框等存在默认样式;

  2. 修改前后效果图:

    修改前:
    在这里插入图片描述 在这里插入图片描述
    修改后:
    在这里插入图片描述

解决方法:

1.如何找到默认样式:
在这里插入图片描述

打开控制台,选中标签查看样式,点开:hov 选择 :hover :focus 即可查看移入 聚焦的样式 。

2:他的样式是设置在子元素上面 所以也要去他的子元素才能找到相应的样式,上面那个橙色小店代表的就是父元素 ,打开了:hover,上面框选中的地方就是可以修改它的默认样式。

代码:

在页面中会有多个输入框所以可以将以下样式写成全局样式,写在样式文件的最上方。

//使用深度选择器
/deep/ .ivu-input:focus {                                                                
    border: 1px solid rgb(167, 165, 165);
    box-shadow:none 
}
/deep/ .ivu-input:hover {
    border:1px solid rgb(167, 165, 165);
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值