為什么我無法刪除 Twitter Bootstrap 中的藍色 textarea 邊框？

Question

在 Chrome 中，textarea 周圍有一個藍色邊框。

我怎么刪不掉

textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus {
        outline:0px !important;
    }

Answer 1

你已經寫了-webkit-appearance:none; 像這樣：

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

Answer 2

引導程序 3

如果只想更改顏色，請更改變量（推薦）：

少或定制

@input-border-focus: red;

無變量

薩斯

$input-border-focus: red;

變量.sass

如果您不想完全刪除它，則必須覆蓋設置大綱的Mixin 。

.form-control-focus(@color: @input-border-focus) {}

CSS

如果您使用 css，請通過以下方式覆蓋它：

.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

鏈接到實施

Answer 3

我相信這是一個陰影。 試試這個：

.box-shadow(none);

或者，如果您沒有使用 LESS：

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

Answer 4

試試這個，我認為這會有所幫助，你的藍色邊框將被刪除：

outline:none;

Answer 5

這對我有用

.form-control {
box-shadow: none!important;}

Answer 6

這 100% 有效。

textarea:focus, input[type="text"]:focus,textarea[type="text"]:focus,   input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus,  input[type="color"]:focus, .uneditable-input:focus, .form-control:focus {  
border-color: (your color) or none;
box-shadow:(your color) or none;
outline: (your color) or none;}

Answer 7

引導程序 4.0

*:focus
{
    box-shadow: none !important;
    border: solid 1px red( any color ) !important;
}

視覺示例

Answer 8

嘗試將邊框顏色更改為您想要的任何內容

.form-control:focus {
  border-color: #666666;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Answer 9

引導程序 4

如果你不想用火箭筒殺死一只蒼蠅，請使用 -webkit-appearance:none; 順便說一句，這也會殺死漂亮的滑塊輸入，並假設您正在使用引導程序表單 css 選擇器“表單控制”進行輸入。

這是解決方案：

.form-control:focus {
    box-shadow: none!important;
    border-color: #ced4da!important;
}

如果您想保留一個很小的藍色輪廓，請保留邊框顏色。

Answer 10

如果你是一個仍然面臨這個問題的人。

這是答案，感謝上帝。

.radio-custom input[type=radio]:focus+label::before {
    background-image: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

您想知道為什么其他解決方案對您不起作用。

因為樣式實際上並未應用於單選按鈕。

添加此樣式您將找到答案

input[type="text"] {
    margin-left: 10px;
}

label::before 那是你必須應用你的風格的地方。

Answer 11

這對我有用..所有其他解決方案對我來說都不太適用，但我從其他解決方案中了解到一件事，它的默認樣式textarea和label組合負責藍色邊框。

textarea, label
{
    outline:0px !important;

    -webkit-box-shadow: none !important;
}

編輯：我在Ant Design textarea 中遇到了這個問題。 這就是為什么這個解決方案對我有用。 因此，如果您正在使用 Ant，請使用它。

Answer 12

為了將來參考，您可以通過檢查器計算出樣式

Answer 13

使用outline: transparent; 為了使大綱看起來好像它不存在，但仍然為您的表單提供可訪問性。 outline: none; 將對可訪問性產生負面影響。

來源： http : //outlinenone.com/

Answer 14

最好的辦法是右鍵單擊 > 檢查元素。

我正在使用 Bootstrap 4 並且在我這樣做之前沒有任何建議起作用。

在檢查窗口中找到相關代碼的位置后，我復制並粘貼了導致 :focus 輪廓為藍色的相關代碼，並對其進行了相應的更改。

這是在我的 css 中工作的代碼

.btn.focus, .btn:focus
{
outline: 0;
box-shadow: 0 0 0 0;
}

Answer 15

這對我有用

input[type=text]:focus{outline: none;}

我正在使用引導程序 3

Answer 16

用這個解決了。 在引導程序 3.x 和 4.0 上運行良好

* {
    outline:0px !important;
    -webkit-appearance:none;
}

使用此代碼，您將從所有標簽和類中刪除大綱。

Answer 17

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus
{
    outline: 0px !important;
    border: none!important;
}

*使用邊框：無； 而不是輪廓，因為焦點線是邊框而不是輪廓。

Answer 18

對於仍在尋找的任何人。 它既不是邊框也不是框陰影。 其實就是“大綱”。 所以只需設置outline: none; 禁用它。

Answer 19

.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    background-image: none;
    
    box-shadow: none;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-control:valid {

    box-shadow: none;
}
.form-control:focus {
    outline: none;
    box-shadow: none;
}