如何去掉antd中Input、Textarea组件获取焦点时的蓝色边框

德顺

发布于 2019-12-20 16:44:47

14K00

代码可运行

文章被收录于专栏：前端资源前端资源

运行总次数：0

代码可运行

Ant Design 的 Input 输入框组件在获取焦点时会有蓝色的边框，尝试用 outline:none 去掉这个边框，但是发现不管用。

最终通过 F12 调试发现 Ant Design 的 Input 组件在获取焦点时蓝色边框是通过 box-shadow 来实现的。

解决方法：通过CSS样式覆盖原始效果

.ant-input:focus {
    border: none;
    box-shadow: none;
}

为了防止误伤，可以这样写：

.ant-input-affix-wrapper .ant-input:focus {
    border: none;
    box-shadow: none;
}

上面的方法把 border 边框也去掉了，如果需要显示边框，可以通过自定义边框颜色来实现： border: 1px solid #DAE2F3; 。

修改 Textarea 聚焦的默认边框：

textarea,textarea.ant-input:hover,textarea:focus{
    border: 1px solid #DAE2F3;
    -webkit-box-shadow: none;
    box-shadow: none;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度