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

时间 2019-12-05

标签去掉 antd input 组件获取焦点蓝色边框繁體版

原文原文链接

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

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

解决方法的css样式以下：app

.ant-input-affix-wrapper .ant-input:focus {
    border: none;
    border-bottom: 1px solid white !important;
    box-shadow: none;
}