在<form>中刪除藍色邊框提交按鈕

我試圖刪除按下時出現的提交按鈕周圍的小藍色邊框。我試圖用border: none;修復它，但那並沒有解決它。目前我的代碼看起來是這樣的：在<form>中刪除藍色邊框提交按鈕

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="theme.css" /> 
     <link rel="stylesheet" type="text/css" href="hover.css" /> 
    </head> 
    <body> 
     <form id="button1" action="#" method="post"> 
      <input type="submit" value="ORANGE" 
       class="btn btn-warning"/> 
     </form> 
    </body> 
</html>

Jsfiddle

我使用XAMPP localhost上和谷歌Chrome運行42.0.2311.90

UPDATE

.btn:focus { 
     outline: none; 
}

這爲我修好了！我不打算讓我的網站通過鍵盤訪問，所以我不需要藍色輪廓。這只是看起來。

來源

2015-04-22 Aruloci

的jsfiddle代碼對我來說看起來很好。沒有藍色邊框。 – Cherry

你使用了哪個瀏覽器？ – Aruloci

你在點擊按鈕時是否在談論輪廓？這就是你的按鈕在Chrome上的樣子https://www.evernote.com/shard/s136/sh/b17e198f-8c77-4306-9a81-c2a902b139ca/20a74b16b9bc85451e507e459ad95041 – jerrylow

我認爲你正在尋找的東西是這樣的：

<style> 
.btn:focus { 
     outline: none; 
    } 
</style>

裏面添加head標籤上面的樣式。默認情況下，引導程序的輪廓顏色爲聚焦按鈕藍色。您可以使用上面提到的類「btn」刪除/更新它。

UPDATE

由於@MatthewRapati提示：本大綱讓我們的人都知道，按鈕具有焦點，並且不應該被刪除。這是一個無障礙的關注。最好是再整，如果默認是不希望

來源

2015-04-22 18:47:38 Fahad

這個大綱讓人們知道該按鈕有焦點，**不應該被刪除。這是一個可訪問性問題。如果不需要默認值，最好重新設置它。 –

是的，同意@MatthewRapati但問題是關於刪除它：P – Fahad

大綱主要用於輔助功能設置，除非您提供某種機制或突出顯示焦點/輔助功能，否則應保留默認行爲。如果您只是在不提供相同內容的情況下進行移除，並且用戶使用鍵盤進行導航，他將無法知道他目前的鏈接/按鈕，並且可能會破壞您網頁的整體體驗。

從按鈕

.btn-warning:focus{ 
    outline:0px; 
}

刪除大綱還可以從所有的按鍵使用

input[type=button]:focus,input[type=submit]:focus{ 
    outline:0px; 
}

默認按鈕重點對鉻1px的藍色輪廓去除輪廓。還有更多的項目具有輪廓，你可以使用禁用所有的人：

*{ 
    outline:0px; 
}

來源

2015-04-22 18:47:33

請不要這樣做。 –

爲什麼我不應該這樣建議？ – Aruloci

@Aruloci任何人使用鍵盤瀏覽您的網站將不知道哪些元素有重點。他們不知道他們在哪裏。 –

取出從按鈕上點擊「綱要」（A：焦點）

.btn:focus { 
    outline: none; 
}

來源

2015-04-22 18:48:15 chrisbedoya

演示：http://jsfiddle.net/baqunkn1/

.btn-warning { 
    color: #ffffff; 
    background-color: #ff851b; 
    border-color: #ff7701; 
    border: none; 
    outline:none; 
}

來源

2015-04-22 18:51:13 Shelly

在<form>中刪除藍色邊框提交按鈕

回答

相關問題