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

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;
}


推荐阅读:

PhpStorm表单提交时获取不到post数据的解决方法

Vue.js学习笔记——项目目录结构

找回Windows Server&Windows10 ltsb 图片查看器

jQuery实现本地input选择图片实时显示

设置 letter-spacing 后文字不能居中的解决方法

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)