Xóa đường viền màu xanh khỏi nút theo kiểu tùy chỉnh css trong Chrome

Tôi đang làm việc trên một trang web và tôi muốn các <button>thẻ theo kiểu tùy chỉnh . Vì vậy, với CSS, tôi đã nói : border: none. Bây giờ nó hoạt động hoàn hảo trong safari, nhưng trong chrome, khi tôi nhấp vào một trong các nút, nó đặt một đường viền màu xanh khó chịu xung quanh nó. Tôi nghĩ button:active { outline: none }hoặc button:focus { outline:none }sẽ làm việc, nhưng không làm. Có ý kiến ​​gì không?

Đây là giao diện của nó trước khi được nhấp (và cách tôi muốn nó vẫn nhìn sau khi được nhấp):

Và đây là biên giới mà tôi đang nói đến:

Đây là CSS của tôi:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Làm điều này không được khuyến khích vì nó hồi quy khả năng truy cập trang web của bạn; để biết thêm thông tin, xem bài viết này .

Điều đó nói rằng, nếu bạn nhấn mạnh, CSS này sẽ hoạt động:

button:focus {outline:0;}

Hãy xem thử hoặc JSFiddle: http://jsfiddle.net/u4pXu/

Hoặc trong đoạn trích này:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Chờ đợi! Có một lý do cho phác thảo xấu xí đó!

Trước khi loại bỏ phác thảo màu xanh xấu xí đó, bạn có thể muốn xem xét khả năng tiếp cận . Theo mặc định, phác thảo màu xanh đó được đặt trên các yếu tố có thể tập trung. Điều này là để người dùng có vấn đề về khả năng truy cập có thể tập trung vào nút đó bằng cách lập bảng cho nó. Một số người dùng không có kỹ năng vận động để sử dụng chuột và chỉ phải sử dụng bàn phím (hoặc một số thiết bị đầu vào khác) để tương tác với máy tính. Khi bạn xóa phác thảo màu xanh, không còn chỉ báo trực quan về yếu tố nào được tập trung. Nếu bạn định loại bỏ đường viền màu xanh, bạn nên thay thế nó bằng một loại dấu hiệu trực quan khác cho thấy nút được tập trung.

Giải pháp có thể: Làm tối các nút khi tập trung

Đối với các ví dụ bên dưới, đường viền màu xanh của Chrome lần đầu tiên được xóa bằng cách sử dụng button:focus { outline:0 !important; }

Dưới đây là các nút Bootstrap cơ bản của bạn khi chúng xuất hiện bình thường:

Dưới đây là các nút khi chúng nhận được tiêu điểm:

Đây là các nút khi chúng được nhấn:

Như bạn có thể thấy, các nút tối hơn một chút khi chúng lấy nét. Cá nhân, tôi khuyên bạn nên làm cho các nút tập trung thậm chí tối hơn để có sự khác biệt rất đáng chú ý giữa trạng thái tập trung và trạng thái bình thường của nút.

Nó không chỉ dành cho người dùng khuyết tật

Làm cho trang web của bạn dễ truy cập hơn là điều thường bị bỏ qua nhưng có thể giúp tạo ra trải nghiệm hiệu quả hơn trong trang web của bạn. Có nhiều người dùng bình thường sử dụng các lệnh bàn phím để điều hướng qua các trang web để giữ tay trên bàn phím.

Tôi chỉ xóa phác thảo khỏi tất cả các thẻ trong trang bằng cách chọn tất cả và áp dụng phác thảo: không có gì cho mọi thứ :)

*:focus {outline:none}

Như bagofcole đã đề cập, bạn cũng có thể cần phải thêm! Quan trọng, vì vậy phong cách sẽ như thế này:

*:focus {outline:none !important}

Trong trường hợp của tôi về vấn đề này, tôi đã phải xác định box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

Đừng quên !importantkhai báo, để có kết quả tốt hơn

button:focus {outline:0 !important;}

Một quy tắc có thuộc tính! Quan trọng sẽ luôn được áp dụng cho dù quy tắc đó xuất hiện ở đâu trong tài liệu CSS.

Loại bỏ outlinelà khủng khiếp cho khả năng tiếp cận! Lý tưởng nhất là vòng lấy nét chỉ hiển thị khi người dùng có ý định sử dụng bàn phím .

Sử dụng : tập trung-nhìn thấy . Hiện tại, đây là đề xuất của W3C về lấy nét chỉ dùng bàn phím bằng CSS và được hỗ trợ trong Firefox ( caniuse ). Cho đến khi các trình duyệt lớn khác hỗ trợ nó, bạn có thể sử dụng polyfill mạnh mẽ này .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Tôi cũng đã viết một bài chi tiết hơn chỉ trong trường hợp bạn cần thêm thông tin.

Thêm phần này vào tệp CSS của bạn.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Sử dụng cái này:

:active {
    outline:none;
}

hoặc điều này nếu nó không hoạt động:

:active {
   outline:none !important;
}

Điều này làm việc cho tôi (ít nhất là FF và Chrome). Thay vì nhắm mục tiêu :focustrạng thái, chỉ cần nhắm mục tiêu :activetrạng thái và điều đó sẽ xóa phần tô sáng gây khó chịu về mặt thẩm mỹ trong trình duyệt của bạn khi người dùng nhấp vào liên kết. Nhưng nó vẫn sẽ giữ trạng thái tiêu điểm khi người dùng có các tab khuyết tật hoặc các tab dịch chuyển qua một trang. Cả hai bên đều hạnh phúc. :)

cho vấn đề này:

dùng cái này:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

kết quả:

Đối với bất kỳ ai sử dụng Bootstrap và gặp vấn đề này, họ sử dụng: active: tập trung cũng như chỉ: active và: tập trung nên bạn sẽ cần:

element:active:focus {
    outline: 0;
}

Hy vọng đã cứu ai đó một thời gian để tìm ra cái đó, đập đầu tôi một chút để tự hỏi tại sao một điều đơn giản như vậy lại không hiệu quả.

Hầu hết các giải pháp sẽ không hoạt động nếu bạn đang sử dụng Bootstrap 4.1 và có thể các phiên bản khác. Sau nhiều lần đập đầu, tôi phát hiện ra bạn cần phải áp dụng lớp bóng-không :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Đây là những gì làm việc cho tôi:

button:focus {
    box-shadow:none;
}

Bản sửa lỗi cho Chrome và các trình duyệt khác

button:focus { outline: none !important; box-shadow: none !important; }

thử mã này cho tất cả các yếu tố có vấn đề viền màu xanh

*{
outline: none;
}

hoặc là

*{
outline-style: none;
}

Một cách khác để giải quyết vấn đề tiếp cận chưa được đề cập ở đây là thông qua một chút Javascript . Tín dụng truy cập blogpost sâu sắc này từ hackernoon: https://hackernoon.com/removing-that-ugly-f Focus-rs-and -keep-it-to-6c8727fefcd2

Cách tiếp cận ở đây thực sự đơn giản nhưng hiệu quả: Thêm một lớp khi mọi người bắt đầu sử dụng phím tab để điều hướng trang (và tùy ý xóa nó khi chuyển sang chuột một lần nữa. Sau đó, bạn có thể sử dụng lớp này để hiển thị phác thảo tiêu điểm hoặc không .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Tôi gặp vấn đề tương tự vì vậy tôi đã sử dụng CSS đơn giản-

.custom-button {
    outline: none
}

Nếu bạn muốn xóa hiệu ứng tương tự trong đầu vào, bạn có thể thêm mã sau đây cũng như nút.

input:focus {outline:0;}

Cho đến khi tất cả các trình duyệt hiện đại sẽ bắt đầu hỗ trợ css-selector : có thể nhìn thấy tiêu điểm ,
cách đơn giản nhất và có thể tốt nhất để lưu khả năng truy cập là chỉ xóa tiêu điểm khó khăn này cho người dùng chuột và lưu nó cho người dùng bàn phím :

1.Sử dụng polyfill nhỏ bé này (khoảng 10kb): https://github.com/WICG/f Focus-visible 2.Thêm
mã tiếp theo ở đâu đó trong css của bạn:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Hỗ trợ trình duyệt của css4-selector: tiêu điểm có thể nhìn thấy ngay bây giờ rất yếu: https://caniuse.com/#search=f Focus-visual

Đơn giản chỉ cần viết outline:none;. Không cần sử dụng yếu tố giảfocus

Đây là một vấn đề trong gia đình Chrome và đã tồn tại mãi mãi.

Một lỗi đã được nêu ra https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Nó có thể được hiển thị ở đây: https://codepen.io/anon/pen/Jedvwj ngay khi bạn thêm đường viền vào bất cứ thứ gì giống nút (ví dụ như vai trò = "nút" đã được thêm vào thẻ chẳng hạn) Chrome rối tung lên và đặt trạng thái tiêu điểm khi bạn nhấp bằng chuột.

Tôi thực sự khuyên bạn nên sử dụng bản sửa lỗi này: https://github.com/wicg/f Focus -visible .

Chỉ cần làm như sau

npm install --save focus-visible

Thêm tập lệnh vào html của bạn:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

hoặc nhập vào tệp nhập chính của bạn nếu sử dụng webpack hoặc một cái gì đó tương tự:

import 'focus-visible/dist/focus-visible.min';

sau đó đặt cái này vào tập tin css của bạn:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Bạn chỉ có thể đặt:

button:focus {outline:0;}

nhưng nếu bạn có số lượng người dùng lớn, bạn sẽ gây bất lợi cho những người không thể sử dụng chuột hoặc những người chỉ muốn sử dụng bàn phím của họ để tăng tốc.

Tôi đã có cùng một vấn đề với bootstrap. Tôi đã giải quyết bằng cả phác thảo và bóng hộp

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}