去掉antd的Input組件獲取焦點時的藍色邊框

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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章