去掉antd的Input组件获取焦点时的蓝色边框

2024年2月15日 138次阅读 来源: RaoMeng

antd的Input输入框组件在获取焦点时会有蓝色的边框显示，最初尝试通过设置outline:none的方法去掉这个边框，但是发现这个方法不起作用。

最终通过在F12调试页面下的Elements选项下的多次观察和实验，发现antd的Input组件在获取焦点情况下的蓝色边框是通过box-shadow来实现的，找到问题所在就很好解决了。

解决方法的css样式如下：

.ant-input-affix-wrapper .ant-input:focus {
    border: none;
    border-bottom: 1px solid white !important;
    box-shadow: none;
}
    原文作者：RaoMeng
    原文地址: https://segmentfault.com/a/1190000017085674
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞