美文网首页
去掉antd的Input组件获取焦点时的蓝色边框

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

作者: RaoMeng | 来源:发表于2018-11-19 15:29 被阅读0次

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

    相关文章

      网友评论

          本文标题:去掉antd的Input组件获取焦点时的蓝色边框

          本文链接:https://www.haomeiwen.com/subject/twcafqtx.html