Các nút của tôi đều có một điểm nổi bật xung quanh chúng sau khi tôi nhấp vào chúng. Đây là trong Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Tôi đang sử dụng Bootstrap với một chủ đề, nhưng tôi khá chắc chắn rằng đó không phải là: Tôi đã nhận thấy điều này trước đây trong một dự án khác.

Nó sẽ biến mất nếu tôi sử dụng một <a>thẻ thay vì <button>. Tại sao? Nếu tôi muốn sử dụng, <button>làm thế nào để tôi biến mất?

Tôi đã tìm thấy Q và A này trên một trang khác và ghi đè lên kiểu lấy nét nút làm việc cho tôi. Vấn đề này có thể cụ thể đối với MacOS với Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Lưu ý rằng điều này có ý nghĩa đối với khả năng truy cập và không được khuyên dùng cho đến khi bạn có trạng thái tập trung nhất quán tốt cho các nút và đầu vào của mình. Theo các bình luận dưới đây, có những người dùng không thể sử dụng chuột.

Bạn muốn một cái gì đó như:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Phương thức .blur () loại bỏ chính xác việc tô sáng tiêu điểm và không làm rối các kiểu của Bootstraps.

sự hiểu biết của tôi là trọng tâm được áp dụng đầu tiên sau onMouseDownsự kiện này, vì vậy gọi e.preventDefault()vào onMouseDowncó thể là một giải pháp sạch tùy thuộc vào nhu cầu của bạn. Đây chắc chắn là một giải pháp thân thiện với khả năng truy cập, nhưng rõ ràng nó điều chỉnh hành vi của các nhấp chuột có thể không tương thích với dự án web của bạn.

Tôi hiện đang sử dụng giải pháp này (trong một react-bootstrapdự án) và tôi không nhận được tiêu điểm nhấp nháy hoặc giữ lại tiêu điểm của các nút sau khi nhấp, nhưng tôi vẫn có thể đánh dấu tiêu điểm của mình và trực quan hóa trọng tâm của các nút tương tự.

Không thể tin được là chưa có ai đăng cái này.

Sử dụng nhãn thay vì nút.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Vĩ cầm

Mặc dù thật dễ dàng để loại bỏ phác thảo cho tất cả các nút tập trung (như trong câu trả lời của người dùng1933897 ), nhưng giải pháp đó rất tệ từ quan điểm về khả năng truy cập (ví dụ: xem Ngừng gây rối với phác thảo Tiêu điểm mặc định của Trình duyệt )

Mặt khác, có lẽ không thể thuyết phục trình duyệt của bạn ngừng tạo kiểu cho nút đã nhấp của bạn là tập trung nếu nó nghĩ rằng nó tập trung sau khi bạn nhấp vào nó (Tôi đang nhìn bạn, Chrome trên OS X).

Vậy chúng ta có thể làm gì? Một vài lựa chọn đến với tâm trí của tôi.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Bạn đang hướng dẫn trình duyệt của mình xóa tiêu điểm xung quanh bất kỳ nút nào ngay sau khi nhấp vào nút. Bằng cách sử dụng mouseupthay vì clickchúng tôi giữ hành vi mặc định cho các tương tác dựa trên bàn phím ( mouseupkhông được kích hoạt bằng bàn phím).

2) CSS: .btn:hover { outline: 0 !important }

Ở đây bạn tắt đề cương cho dao động chỉ nút. Rõ ràng nó không lý tưởng, nhưng có thể là đủ trong một số tình huống.

Điều này làm việc cho tôi. Tôi đã tạo một lớp tùy chỉnh ghi đè CSS cần thiết.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-Webkit-box-Shadow sẽ hoạt động cho các trình duyệt Chrome và safari.

Điều này làm việc cho tôi, một giải pháp khác không được đề cập. Chỉ cần ném nó trong sự kiện nhấp chuột ...

$(this).trigger("blur");

Hoặc gọi nó từ một sự kiện / phương pháp khác ...

$(".btn_name").trigger("blur");

Nếu bạn sử dụng quy tắc :focus { outline: none; }để xóa các phác thảo, liên kết hoặc điều khiển sẽ có thể được lấy nét nhưng không có dấu hiệu tập trung cho người dùng bàn phím. Các phương thức để loại bỏ nó như thế với JS onfocus="blur()"thậm chí còn tệ hơn và sẽ dẫn đến việc người dùng bàn phím không thể tương tác với điều khiển.

Các bản hack bạn có thể sử dụng, đó là loại OK , bao gồm thêm :focus { outline: none; }các quy tắc khi người dùng tương tác với chuột và xóa chúng một lần nữa nếu phát hiện tương tác bàn phím. Lindsay Evans đã thực hiện một lib cho điều này: https://github.com/lindsayevans/outline.js

Nhưng tôi muốn đặt một lớp trên thẻ html hoặc thẻ body. Và có quyền kiểm soát trong tệp CSS khi nào nên sử dụng.

Ví dụ: (trình xử lý sự kiện nội tuyến chỉ dành cho mục đích trình diễn):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Tôi đã đặt bút togheter: http://codepen.io/snobojohan/pen/RWXXmp

Nhưng hãy cẩn thận có vấn đề hiệu suất. Điều này buộc phải sơn lại mỗi khi người dùng chuyển đổi giữa chuột và bàn phím. Tìm hiểu thêm về việc tránh các loại sơn không cần thiết http://www.html5rocks.com/en/tutorials/speed/unn cần thiết-sơn /

Tôi đã nhận thấy điều tương tự và mặc dù nó thực sự làm tôi khó chịu, tôi tin rằng không có cách xử lý nào thích hợp.

Tôi sẽ khuyên bạn nên chống lại tất cả các giải pháp khác được đưa ra bởi vì chúng hoàn toàn tiêu diệt khả năng truy cập của nút, vì vậy bây giờ, khi bạn nhấn vào nút, bạn sẽ không nhận được trọng tâm mong đợi.

Điều này nên tránh!

.btn:focus {
  outline: none;
}

Tôi tìm một giải pháp. Khi chúng tôi tập trung, bootstrap sử dụng bóng hộp, vì vậy chúng tôi chỉ vô hiệu hóa nó (không đủ danh tiếng, không thể tải lên hình ảnh :().

Tôi thêm

.btn:focus{
    box-shadow:none !important;
}

nó hoạt động.

TÙY CHỌN 1: Sử dụng lớp :focus-visiblegiả

Lớp :focus-visiblegiả có thể được sử dụng để tiêu diệt các đường viền khó coi và vòng lấy nét trên các nút và các yếu tố khác nhau cho người dùng KHÔNG điều hướng qua bàn phím (ví dụ: qua chạm hoặc nhấp chuột).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Cảnh báo: Kể từ năm 2020, lớp :focus-visiblegiả không được hỗ trợ rộng rãi trên các trình duyệt . Tuy nhiên, polyfill rất dễ sử dụng; xem hướng dẫn dưới đây.

TÙY CHỌN 2: Sử dụng .focus-visiblepolyfill

Giải pháp này sử dụng một lớp CSS bình thường thay vì lớp giả được đề cập ở trên và có hỗ trợ trình duyệt rộng vì đây là một polyfill dựa trên Javascript chính thức .

Bước 1: Thêm các phụ thuộc Javascript vào trang HTML của bạn

Lưu ý: polyfill có thể nhìn thấy tập trung yêu cầu một polyfill bổ sung cho một số trình duyệt cũ không hỗ trợ classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Bước 2: Thêm CSS sau vào biểu định kiểu của bạn

Sau đây là phiên bản sửa đổi của giải pháp CSS được ghi lại kỹ lưỡng hơn ở trên.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Bước 3 (tùy chọn): sử dụng lớp 'tiêu điểm có thể nhìn thấy' khi cần thiết

Nếu bạn có bất kỳ mục nào mà bạn thực sự muốn hiển thị vòng lấy nét khi ai đó nhấp hoặc sử dụng cảm ứng, thì chỉ cần thêm focus-visiblelớp vào phần tử DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Nguồn:

• https://css-tricks.com/keyboard-only-f Focus-styles /

Bản giới thiệu:

• https://wicg.github.io/focus-visible/demo/

Nếu cách trên không phù hợp với bạn, hãy thử điều này:

.btn: tập trung {phác thảo: none; hộp-bóng: none; đường viền: 2px solid trong suốt;}

Như user1933897 đã chỉ ra, điều này có thể dành riêng cho MacOS với Chrome.

Muộn, nhưng ai biết nó có thể giúp được ai đó. CSS sẽ trông như sau:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML sẽ trông như sau:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Bằng cách này bạn có thể giữ btn và đó là hành vi liên quan.

Tôi đã đề cập điều này trong một bình luận ở trên, nhưng nó đáng để liệt kê như một câu trả lời riêng biệt cho rõ ràng. Miễn là bạn không cần phải thực sự tập trung vào nút, bạn có thể sử dụng sự kiện tiêu điểm để xóa nó trước khi nó có thể áp dụng bất kỳ hiệu ứng CSS nào:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Điều này tránh hiện tượng nhấp nháy có thể nhìn thấy khi sử dụng sự kiện nhấp chuột. Điều này không giới hạn giao diện và bạn sẽ không thể chuyển sang nút, nhưng đó không phải là vấn đề trong tất cả các ứng dụng.

Phong cách

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Sử dụng

<button class="btn btn-primary not-focusable">My Button</button>

Hãy thử giải pháp này để loại bỏ đường viền xung quanh nút. Thêm mã này trong css.

Thử

button:focus{
outline:0px;
}

Nếu không hoạt động thì sử dụng dưới đây.

button:focus{
 outline:none !important;
 }

Đối với những người muốn một cách css thuần túy để làm điều đó:

:focus:not(:focus-visible) { outline: none }

Điều này cũng có thể hoạt động cho liên kết và như vậy, và phần thưởng, nó giữ cho khả năng truy cập bàn phím. Cuối cùng, nó bị bỏ qua bởi các trình duyệt không hỗ trợ: có thể nhìn thấy tiêu điểm

Chúng tôi đã gặp phải một vấn đề tương tự và nhận thấy rằng Bootstrap 3 không có vấn đề trên các tab của họ (trong Chrome). Có vẻ như họ đang sử dụng kiểu phác thảo cho phép trình duyệt quyết định những gì tốt nhất để làm và Chrome dường như làm những gì bạn muốn: hiển thị phác thảo khi tập trung trừ khi bạn chỉ cần nhấp vào yếu tố.

Hỗ trợ outline-stylerất khó để xác định vì trình duyệt phải quyết định điều đó có nghĩa là gì. Tốt nhất để kiểm tra trong một vài trình duyệt và có quy tắc dự phòng.

Một giải pháp khả thi khác là thêm một lớp bằng trình nghe Javascript khi người dùng nhấp vào nút và sau đó xóa lớp đó theo tiêu điểm với một trình nghe khác. Điều này duy trì khả năng truy cập (hiển thị tab) đồng thời ngăn chặn hành vi kỳ quặc của Chrome khi xem xét một nút tập trung khi nhấp vào.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Ví dụ đầy đủ tại đây: https://jsfiddle.net/4bbb37fh/

Đó là công việc, tôi hy vọng giúp bạn

.btn:focus, .btn:focus:active {
    outline: none;
}

.btn:focus:active {
  outline: none;
}

điều này loại bỏ phác thảo khi nhấp, nhưng vẫn giữ tiêu điểm khi lập bảng (đối với a11y)

Cái này hoạt động tốt nhất

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

phác thảo này: không cái nào hoạt động cho cả nút và thẻ

Thêm phần này vào CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Tôi tìm thấy một giải pháp chỉ cần thêm dòng dưới đây trong mã css của bạn.

button:focus { outline: none }

Tôi vừa gặp vấn đề tương tự trên MacOS và Chrome khi sử dụng nút để kích hoạt sự kiện "chuyển tiếp". Nếu bất cứ ai đọc điều này đã sử dụng một trình lắng nghe sự kiện, bạn có thể giải quyết nó bằng cách gọi .blur()sau hành động của bạn.

Thí dụ:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Mặc dù nếu bạn chưa sử dụng trình lắng nghe sự kiện, việc thêm một trình giải quyết vấn đề này có thể thêm chi phí không cần thiết và một giải pháp tạo kiểu như các câu trả lời trước cung cấp sẽ tốt hơn.

Bạn có thể thiết lập tabIndex="-1". Nó sẽ khiến trình duyệt bỏ qua nút này khi bạn TAB thông qua các điều khiển có thể lấy nét.

Các "sửa lỗi" khác được đề xuất ở đây, chỉ xóa phác thảo tiêu điểm, nhưng vẫn để các nút có thể tab. Tuy nhiên, từ quan điểm khả năng sử dụng, bạn đã loại bỏ ánh sáng, vì vậy người dùng của bạn sẽ không biết nút nào hiện đang được tập trung, bằng mọi cách.

Mặt khác, làm cho nút không thể lập bảng có ý nghĩa về khả năng truy cập.

Tôi đang sử dụng nó để xóa phác thảo tiêu điểm khỏi nút X, nút bootstrap modalnày có nút "Đóng" trùng lặp ở phía dưới, vì vậy giải pháp của tôi không ảnh hưởng đến khả năng truy cập.

Nếu bạn đang sử dụng trình duyệt webkit (và có khả năng là trình duyệt tương thích với tiền tố của nhà cung cấp webkit), thì đường viền đó thuộc về giả của nút -webkit-focus-ring. Đơn giản chỉ cần đặt nó outlinethành none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome là một trình duyệt webkit và hiệu ứng này cũng xảy ra với Linux (không chỉ là một thứ macOS, mặc dù một số kiểu Chrome chỉ là macOS)

Tôi đã gặp vấn đề tương tự khi sử dụng <a>hoạt động như nút và tôi phát hiện ra mình đang thiếu một cách giải quyết bằng cách thêm attr type="button"làm cho nó hoạt động bình thường đối với tôi ít nhất.

<a type="button" class="btn btn-primary">Release Me!</a>

trực tiếp trong thẻ html (trong trường hợp bạn có thể muốn để lại chủ đề bootstrap ở vị trí khác trong thiết kế của mình) ..

ví dụ để thử ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..Vân vân,. tùy thuộc vào hiệu quả mong muốn.