免責宣告：我以前從未使用過CSS，這是我第一次執行與造型有關的前端任務，所以我對任何誤解、錯誤的用詞等感到抱歉。
正如你所看到的，按鈕在被點擊時有一個邊框(?)，看起來像是一個點擊保持或什么。
在這張圖片中沒有像（2）那樣的邊框。這是一個簡單的按鈕組件：
<button className={`btn position-relative ${className}`/span>} onClick={onClick}>
...
</button>
而打開Modal的組件有以下代碼：
<Button onClick={( ) => setModal(true)} className={'btn btn-primary mr-2' }>
(資訊圖示)
</Button>
你知道在點擊(1)之后，我怎樣才能實作讓按鈕像(3)那樣，而不是像(2)那樣嗎？
uj5u.com熱心網友回復：
Bootstrap（從它的部分scss檔案_buttons.scss）在聚焦（=點擊）的時候，默認為按鈕添加一個盒狀陰影（藍色）
這就是樣式
這就是樣式。
.btn.focus, .btn:focus{
outline: 0;
box-shadow: 0 0 0 0。 2rem rgb(0 123 255 / 25%) 。
}
所以你應該做的是在你自己的樣式表中洗掉它（覆寫它）。請記住，你應該使用一個更具體的選擇器。只使用.btn:focus { } 不會覆寫它。在下面的例子中，我也使用了標簽的名字 button.btn:focus {}
button.btn：focus{
box-shadow: none;
}<link href="https://maxcdn. bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="styleheet"/>
<button class="btn"/span>> Button</button>/span>P.S. 你可以使用每個現代瀏覽器提供的開發工具來 "檢查 "在任何元素的不同狀態（懸停、焦點、活動）下添加的樣式
uj5u.com熱心網友回復：try this ______________________________________________________
。.btn-primary：focus{
outline: none ! important;
box-shadow: none ! important;
}< script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet"/>
< button type="button" class="btn btn-primary" > 保存更改</按鈕>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331514.html
標籤：