nút bootstrap hiển thị đường viền màu xanh khi nhấp vào

Tôi đã thêm điều này nhưng vẫn có đường viền màu xanh xuất hiện khi nhấp vào nút.

.btn:focus {
  outline: none;
}

Làm thế nào để loại bỏ điều xấu xí đó?

Có thể tài sản của bạn đang bị ghi đè. Hãy thử đính kèm !importantmã của bạn cùng với: active.

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

Đồng thời thêm bóng hộp vì nếu không bạn vẫn sẽ thấy nút bóng xung quanh.

Mặc dù đây không phải là một cách thực hành tốt để sử dụng! Quan trọng, tôi khuyên bạn nên sử dụng lớp cụ thể hơn và sau đó thử áp dụng css với việc sử dụng! Quan trọng ...

Trong phiên bản mới nhất của Bootstrap, tôi thấy việc xóa phác thảo không hoạt động. Và tôi phải thêm cái này vì cũng có một cái bóng hình hộp:

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

Có lớp boostrap tích shadow-nonehợp để vô hiệu hóa box-shadow(không outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Điều này loại bỏ bóng của nút:

<button class='btn btn-primary shadow-none'>Example button</button>

Thử mã dưới đây

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Điều này đã xảy ra với tôi trong Chrome (mặc dù không phải trong Firefox). Tôi đã phát hiện ra rằng outlinetài sản đang được Bootstrap đặt là outline: 5px auto -webkit-focus-ring-color;. Được giải quyết bằng cách ghi đè thuộc outlinetính sau này trong CSS tùy chỉnh của tôi như sau:

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

Điều này sẽ giải quyết nút bằng một văn bản, chỉ có một biểu tượng hoặc một nút là một liên kết:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

Nếu bạn thêm border:none !important;

{
    border:none !important;
    outline:none !important;
}

sau đó nút sẽ trở thành kích thước nhỏ hơn khi nhấp vào.

Thử cái này

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

Trong Bootstrap 4 họ sử dụng box-shadow: 0 0 0 0px rgba(0,123,255,0);: tập trung, tôi đã giải quyết vấn đề của mình với

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Ngay cả sau khi xóa phác thảo khỏi nút bằng cách đặt giá trị của nó thành 0, vẫn có một hành vi hài hước trên nút khi nhấp vào, kích thước của nó co lại một chút. Vì vậy, tôi đã đưa ra một giải pháp tối ưu:

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

Hi vọng điêu nay co ich...

Bạn cần sử dụng lồng đúng cách và sau đó áp dụng các kiểu cho nó.

• Nhấp chuột phải vào nút và tìm lớp lồng chính xác cho nó bằng cách sử dụng (Kiểm tra phần tử bằng cách sử dụng fireorms cho firefox), (kiểm tra phần tử cho chrome).

• Thêm phong cách cho toàn bộ các lớp. Chỉ sau đó nó sẽ làm việc

Tôi thấy điều này khá hữu ích trong trường hợp của tôi sau khi nhấp vào nút.

$('#buttonId').blur();

Tôi đã chọn chỉ đơn giản là loại bỏ chiều rộng đường viền trên :focus. Điều này loại bỏ không gian xấu xí giữa phác thảo và các góc tròn của nút. Vì một số lý do, vấn đề này chỉ xảy ra đối với các yếu tố nút thực tế chứ không phải <a class="btn">các yếu tố.

button.btn:focus {
  border-width: 0;
}

Điều này có thể giúp nếu ai đó vẫn còn câu hỏi này chưa được giải quyết.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Đây là giải pháp Boostrap 4 của tôi để loại bỏ các phác thảo nút

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Tôi chỉ gặp vấn đề tương tự và đoạn mã sau hoạt động với tôi:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Hy vọng nó sẽ giúp!

Trên thực tế trong bootstrap được định nghĩa tất cả các biến cho tất cả các trường hợp. Trong trường hợp của bạn, bạn chỉ cần ghi đè biến mặc định '$ input-btn-Focus-box-Shadow' từ tệp '_variabled.scss'. Giống như vậy: $input-btn-focus-box-shadow: none; Lưu ý rằng bạn cần ghi đè biến đó trong tùy chỉnh '_yourCusomVarsFile.scss' của riêng bạn. Và tập tin đó nên được nhập trong dự án theo thứ tự đầu tiên và sau đó bootstrap như vậy:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Các vars bootstraps đi với cờ '! Mặc định'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Vì vậy, trong tệp của bạn, bạn sẽ ghi đè các giá trị mặc định. Đây là hình minh họa:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Các var đầu tiên có nhiều ưu tiên hơn thứ hai. Điều tương tự là cho các trạng thái và trường hợp còn lại. Hy vọng nó sẽ giúp bạn.

Đây là tệp '_variable.scss' từ repo, nơi bạn có thể tìm thấy tất cả các giá trị ban đầu từ bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

cái này hiệu quả với tôi trên BS3

Cái này hoạt động với tôi trong Bootstrap 4:

.btn {border-color: transparent;}

Thử

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

Hãy ghi nhớ, nếu nút của bạn nằm trong một neo như:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Thêm kiểu vào nút có thể không đủ, bạn có thể cần thêm các a:focus, a:active { outline: none }quy tắc CSS khi thích hợp (điều này phù hợp với tôi).

Hãy thử dưới đây

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Đôi khi {outline: 0}không giải quyết được vấn đề và chúng ta có thể thử{box-shadow: none;}

Tôi đang sử dụng bootstrap 4, bạn có thể sử dụng phác thảo và bóng hộp.

#buttonId {
    box-shadow: none;
    outline: none;
}

Hoặc nếu nút nằm trong một phần tử như div mà không có mặt sau, bóng hộp là đủ.

#buttonId {
     box-shadow: none;
}

Ví dụ: https://codepen.io/techednelson/pen/XRwgRB

Nếu bạn đang sử dụng phiên bản 4.3 trở lên, mã của bạn sẽ không hoạt động chính xác. Đây là những gì tôi đã sử dụng. Nó làm việc cho tôi.

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

Thay vào đó để nhắm mục tiêu vào lớp nút ( .btn ), ở đây tôi nhắm mục tiêu đến chính phần tử nút và nó hoạt động với tôi.

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

Và có thể sử dụng shadow-nonelớp cho trường đầu vào

Đây là một phương pháp không phải CSS. Sử dụng JQuery, chỉ cần xóa lớp "tiêu điểm" bất cứ khi nào phần tử được nhấp vào.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Phương pháp này có thể khiến đường viền lóe lên và sau đó rút lui một cách ngắn gọn, theo quan điểm của tôi (nó trông giống như một phần của phản hồi khi nhấp vào nút).

Lý do tôi sử dụng .mousemove () là .click () và .mouseup () đều tỏ ra không hiệu quả.

Thay đổi những giá trị này làm việc cho tôi. Tôi đã tìm thấy nó bằng cách xem Công cụ dành cho nhà phát triển của Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Cái này cũng giữ lại bóng của nút, nó chỉ thay đổi màu của nút khi nhấp.

Ghi đè các câu lệnh bootstrap chính xác:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Thay đổi màu viền trở lại màu xám

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Cách SCSS cho tất cả các yếu tố (không chỉ các nút):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}