android教程 search vector automation routing vue框架 vue最新版本 java并发编程视频 angularjs视频教程 ps视频教程全集完整版 jq延时 centos查看php版本 mysql增删改查语句 python3入门 python参考手册 python写文件 python读取数据库 java数组删除 java语言编程 java数据类型转换 qq免安装 3d软件下载 模拟人生2夜生活 凤凰刷机 系统工具箱 idea导出jar包 r330不能识别墨盒 pr时间轴 jq循环 bin文件编辑器 羽化快捷键 上单艾克出装 黑域使用教程 无线中继是什么意思 cad多段线线宽设置 日志软件 cpu和显卡怎么搭配 jsps2寸照片制作 ps渐变工具在哪里 数组对象去重
当前位置: 首页 > 学习教程  > 

修改框架中的默认样式 例:修改antd中Input组件获取焦点时的蓝色边框

2020/10/16 18:01:36 文章标签: input边框颜色

antd中的组件样式默认是蓝色的,但实际项目中需要根据皮肤颜色进行切换.于是使用公共样式,覆盖组件本身的样式.需求是 移入input框变成灰色,点击选择的时候更换颜色 为了更好的演示代码. 移入变成红色 点击后变成橙色 修改前: 修改后: 代码如下: .ant-calendar-picker:hover …

antd中的组件样式默认是蓝色的,但实际项目中需要根据皮肤颜色进行切换.于是使用公共样式,覆盖组件本身的样式.需求是 移入input框变成灰色,点击选择的时候更换颜色
为了更好的演示代码. 移入变成红色 点击后变成橙色
修改前:
在这里插入图片描述
修改后:
在这里插入图片描述
代码如下:

.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
    border-color: #C0C4CC;
}
.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled){
    border-color:#fea91d
    box-shadow: none;
}

怎么找到相应的样式:
在这里插入图片描述
右键点击之后查看样式, 点开:hov 选择 :hover :focus 即可查看移入 聚焦的样式 .

在这里插入图片描述
因为他的样式是设置在子元素上面 所以也要去他的子元素才能找到相应的样式,上面那个橙色小店代表的就是父元素 已经打开了:hov设置 下面框中的地方 则是可以修改的默认样式


本文链接: http://www.dtmao.cc/news_show_300295.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?