Bootstrap的Togglable選項卡 - 刪除大綱/焦點？

我正在使用從Twitters Bootstrap的Bootstrap的Togglable選項卡 - 刪除大綱/焦點？

我有問題，即使你也可以從示例中看到。當用戶單擊該選項卡時，活動選項卡周圍有虛線邊框。

我使用的問題，火狐11截圖：

enter image description here

我期待擺脫虛線邊框的。有誰知道你是如何做到這一點的？

.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
    outline:none; 
}

雖然我建議你把它留在，因爲它的存在在一定程度上幫助殘疾人和屏幕的人：

感謝

來源

2012-03-20 StuBlackett

什麼虛線邊框？我只能看到一行（可視化標識所選標籤）。你使用的是什麼瀏覽器？ – 2012-03-20 15:41:14

我沒有看到任何虛線邊框。它看起來很穩固 – DG3 2012-03-20 15:41:45

@burhan我正在使用FireFox v11 – StuBlackett 2012-03-20 15:43:01

嘗試在鏈接元素上使用outline: 0;。看到css-tricks.com/removing-the-dotted-outline

//line 2576 of bootstrap.css 
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
outline: 0; 
color: #555555; 
background-color: #ffffff; 
border: 1px solid #ddd; 
border-bottom-color: transparent; 
cursor: default; 
}

來源

2012-03-20 15:45:16 Tim

那就是那個。以前從未使用過CSS的輪廓。這也會跨瀏覽器呢？ – StuBlackett 2012-03-20 15:47:48

line nr是在nonminified文件和Bootstrap v2.0.2 – Tim 2012-03-20 15:48:57

我認爲這是一個Firefox的東西。虛線可能不會在其他瀏覽器中顯示。 – Tim 2012-03-20 15:49:55

你指的是外形，您可以按以下方式刪除它讀者會正確顯示您的內容，因此您將通過刪除它來影響可用性。

來源

2012-03-20 15:45:04

這是正確的，非常重要。如果您刪除大綱屬性，則必須將其替換爲另一種樣式：關注鏈接和交互式元素。不能（或者不願意）用鼠標導航頁面的用戶需要可視指示哪個元素當前處於焦點。這是一個可訪問性要求。 – Marcus 2013-02-12 20:02:15

要解決此問題Firefox和其他瀏覽器，我可以使用下面的CSS：

/* Remove dotted outline from image inputs */ 
input::-moz-focus-inner { 
    border: 0; 
} 

/* Remove dotted outline from all links */ 
a { 
outline: 0; 
}

來源

2012-03-20 16:03:08

，重點邊境是一個輔助功能。通過刪除它，您正在阻止某些人訪問您的網站。有些人指的是殘疾人。

This video有助於明白我的觀點（他有行動障礙）。（Here's it forwarded當他在去除邊框鯉魚來。）

來源

2014-05-03 14:04:37 Merovex

最簡單的方法，如果你從少編譯你的CSS，刪除此代碼到您的減檔

.tab-focus() { 
    outline: 0; 
}

就是這樣。

來源

2014-05-13 21:45:03 thednp

使用以下網頁上的CSS：

html * { 
    outline: 0 !important; 
}

來源

2014-08-01 19:01:19 user3900576

「禁用」類或國家本身不是輔助設備。

我不知道信息來自哪裏，但它是完全錯誤的。 'Disabled'是STATE其中按鈕或錨點是未啓用。意思是用戶不能點擊它。或者，點擊它不會觸發任何操作。使用此標籤，殘疾人不會受到任何影響。 BTW-我是非盈利的網絡開發者/設計者，爲殘障人士提供支持和服務，並在各種設備上測試我的網頁，包括屏幕閱讀器和其他輔助設備。

焦點選項卡的類爲.focus，活動選項卡的類爲.active。

針對輔助功能的設計至關重要，因此請務必使用符合W3C標準的驗證程序（如https://validator.w3.org/）檢查您的代碼。偶爾，我不得不通過JavaScript手動控制網站標籤頁或標籤的順序，但通常Bootstrap處理得很好。

示例： 我一直使用.disabled類爲web窗體。我的「提交」按鈕被禁用，直到所有必填字段都包含正確的信息。然後，只需刪除.disabled類，並允許他們提交。

也就是說，你的做需要包括輔助設備的焦點/懸停項目的邊界。這使用戶能夠跟蹤他們在您的網站上「懸停」的內容。如上所述，您可以對其進行重新調整以更好地適應您的設計或其他方面，但請確保您有指示重點的內容。

如果有人有反擊信息，我會有興趣閱讀它。

來源

2016-01-26 16:05:05

您可以使用下面的示例;）

.nav > li > a { 
    outline:none; 
}

來源

2016-04-21 11:22:36

Bootstrap的Togglable選項卡 - 刪除大綱/焦點？

回答

相關問題