问题描述:
-
使用iview组件库时,其中的Input输入框、select下拉选择框等存在默认样式;
-
修改前后效果图:
修改前:
修改后:
解决方法:
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);
}