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

2023年8 月4日 / 网站源码 / 没有评论 / 1,450次

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

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

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

  1. .ant-input:focus {
  2.     border: none;
  3.     box-shadow: none;
  4. }

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

  1. .ant-input-affix-wrapper .ant-input:focus {
  2.     border: none;
  3.     box-shadow: none;
  4. }

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

修改 Textarea 聚焦的默认边框：

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

关键词:

时间：2023年8 月4日，星期五，下午5:09。
通过 RSS 2.0 订阅源关注。

«
»

提交评论

同类文章