Hướng dẫn remove outline button bootstrap - loại bỏ nút phác thảo bootstrap

72

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang tìm cách đạt được điều này: //getbootstrap.com/javascript

Tuy nhiên, theo mã của riêng tôi, nó phác thảo màu xanh, mặc dù có rất nhiều nỗ lực của CSS từ tôi để loại bỏ điều này!

Trông có vẻ chính xác ở Safari và Firefox nhưng không đi trong chrome!

Ryan M ♦

16.6K30 Huy hiệu vàng56 Huy hiệu bạc65 Huy hiệu Đồng30 gold badges56 silver badges65 bronze badges

hỏi ngày 18 tháng 1 năm 2014 lúc 6:52Jan 18, 2014 at 6:52

1

Tôi thấy

.btn:focus {
  box-shadow: none;
}
4 có
.btn:focus {
  box-shadow: none;
}
5 trên đó:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Hãy thử thay đổi điều này thành:

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

Về cơ bản, hãy tìm kiếm bất kỳ trường hợp nào của

.btn:focus {
  box-shadow: none;
}
5 trên các yếu tố
.btn:focus {
  box-shadow: none;
}
7ed - đó là những gì gây ra nó.

Cập nhật - cho Bootstrap v4: - For Bootstrap v4:

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

Dalsoft

10,2K3 Huy hiệu vàng40 Huy hiệu bạc53 Huy hiệu Đồng3 gold badges40 silver badges53 bronze badges

Đã trả lời ngày 18 tháng 1 năm 2014 lúc 6:58Jan 18, 2014 at 6:58

Nick Heernick HeerNick Heer

1.5231 Huy hiệu vàng10 Huy hiệu bạc7 Huy hiệu đồng1 gold badge10 silver badges7 bronze badges

5

Đối với bất kỳ kẻ lừa đảo nào như tôi, ở đâu ..

.btn:focus {
    outline: none;
}

Vẫn không hoạt động trong Google Chrome, sau đây sẽ loại bỏ hoàn toàn bất kỳ nút phát sáng nào.

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

Đã trả lời ngày 28 tháng 1 năm 2015 lúc 15:42Jan 28, 2015 at 15:42

Shaneparsonsshaneparsonsshaneparsons

1.3811 Huy hiệu vàng17 Huy hiệu bạc24 Huy hiệu đồng1 gold badge17 silver badges24 bronze badges

3

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

Điều này sẽ loại bỏ phác thảo và bóng hộp

Đã trả lời ngày 7 tháng 4 năm 2015 lúc 6:08Apr 7, 2015 at 6:08

1

Trong Bootstrap 4, phác thảo không còn được sử dụng, mà là hình ảnh hộp. Nếu đó là trường hợp của bạn, chỉ cần làm như sau:

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

Đã trả lời ngày 2 tháng 1 năm 2018 lúc 14:37Jan 2, 2018 at 14:37

0

Với SCSS:

$btn-focus-box-shadow: none!important;

Đã trả lời ngày 4 tháng 6 năm 2018 lúc 9:18Jun 4, 2018 at 9:18

Hannes Behannes đượcHannes Be

711 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

0

.btn:focus {
  box-shadow: none;
}
8 hoặc
.btn:focus {
  box-shadow: none;
}
9 một mình không thể ghi đè kiểu của Bootstrap. Cho chủ đề mặc định:override Bootstrap's styles. For default theme:

________số 8

Đã trả lời ngày 6 tháng 2 năm 2016 lúc 15:21Feb 6, 2016 at 15:21

Giải pháp đơn giản nhất là: Tạo tệp CSS và nhập cái này:

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

Rohan Pillai

8623 Huy hiệu vàng19 Huy hiệu bạc26 Huy hiệu đồng3 gold badges19 silver badges26 bronze badges

Đã trả lời ngày 25 tháng 3 năm 2018 lúc 8:39Mar 25, 2018 at 8:39

Điều này sẽ loại bỏ nó - ngắn và sạch sẽ:

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

Đã trả lời ngày 21 tháng 1 năm 2016 lúc 16:32Jan 21, 2016 at 16:32

0

Đây là giải pháp:

.btn:focus {
  outline: none !important;
}
1
.btn:focus {
  outline: none !important;
}
2

Điều này hoạt động 100% hy vọng nó sẽ giúp bạn.

Đã trả lời ngày 15 tháng 12 năm 2018 lúc 15:53Dec 15, 2018 at 15:53

NIXXNIXXnixx

1371 Huy hiệu bạc7 Huy hiệu đồng1 silver badge7 bronze badges

Bạn có thể loại bỏ bóng mà không cần tự mình làm thêm CSS.

Thông thường thêm một nút như thế này.

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

Bạn chỉ có thể thêm

.btn:focus {
    outline: none;
}
1 để xóa phác thảo.
.btn:focus {
    outline: none;
}
2
.btn:focus {
    outline: none;
}
2

Đã trả lời ngày 18 tháng 6 lúc 17:58Jun 18 at 17:58

JerakinjerakinJerakin

3862 Huy hiệu bạc17 Huy hiệu đồng2 silver badges17 bronze badges

Tìm kiếm và thay thế

.btn:focus {
  outline: none !important;
}
3

Thay thế

.btn:focus {
  outline: none !important;
}
4

Đã trả lời ngày 11 tháng 4 năm 2014 lúc 12:54Apr 11, 2014 at 12:54

AbxStractabxStractabxstract

3093 Huy hiệu bạc11 Huy hiệu đồng3 silver badges11 bronze badges

1

Nếu các câu trả lời trên vẫn không hoạt động, hãy thêm điều này:

.btn:focus {
  outline: none !important;
}
5

Đã trả lời ngày 11 tháng 9 năm 2018 lúc 9:35Sep 11, 2018 at 9:35

Nó hoạt động cho nút bootstrap của tôi sau một căng thẳng như vậy

.btn:focus {
  outline: none !important;
}
6

Đã trả lời ngày 4 tháng 12 năm 2019 lúc 4:21Dec 4, 2019 at 4:21

.btn:focus {
  outline: none !important;
}
7

Đã trả lời ngày 15 tháng 12 năm 2021 lúc 19:00Dec 15, 2021 at 19:00

Bạn có thể đặt thẻ này vào HTML của bạn.

.btn:focus {
  outline: none !important;
}
8

Tôi đã sử dụng tập trung vì Onclick vẫn hiển thị ánh sáng cho một micro giây và tạo ra một tia sáng trông khủng khiếp về mặt sử dụng nó. Điều này dường như bị loại bỏ sau khi tất cả các phương pháp CSS thất bại.

Đã trả lời ngày 16 tháng 9 năm 2015 lúc 9:20Sep 16, 2015 at 9:20

CSS đó đi từ tệp này "Tab-Focus.less" trong thư mục Mixins [có thể khó tìm, bởi vì các mixin không được hiển thị tại Chrome Dev-Tools]. Vì vậy, bạn nên chỉnh sửa điều này:

.btn:focus {
  outline: none !important;
}
9

Đã trả lời ngày 18 tháng 12 năm 2015 lúc 11:32Dec 18, 2015 at 11:32

Trong các hỗn hợp của các tập tin SASS nguồn bootstrap, hãy xóa tất cả các tài liệu tham khảo

.btn:focus {
    outline: none;
}
3 [không có trong biến thể phác thảo].

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

Hoặc chỉ cần mã hóa bạn sở hữu _custombutton.scss mixin.

Đã trả lời ngày 11 tháng 5 năm 2017 lúc 9:19May 11, 2017 at 9:19

Nếu ai đó đang sử dụng bootstrap sass lưu ý, mã có trên tệp _reboot.scss như thế này:

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

Vì vậy, nếu bạn muốn giữ tệp _Reboot, tôi đoán hãy thoải mái ghi đè với CSS đơn giản thay vì cố gắng tìm kiếm một biến để thay đổi.

Đã trả lời ngày 1 tháng 10 năm 2018 lúc 17:45Oct 1, 2018 at 17:45

Nếu bạn đang sử dụng Bootstrap v5.1 hoặc bất kỳ phiên bản nào khác. Để xóa đường viền của nút chuyển đổi Bootstrap Navbar của bạn, hãy làm điều này:

.btn:focus {
  box-shadow: none;
}
2
.btn:focus {
  box-shadow: none;
}
3

Hy vọng câu trả lời này sẽ giúp bạn.

Đã trả lời ngày 24 tháng 9 năm 2021 lúc 6:21Sep 24, 2021 at 6:21

Bootstrap 5 trở lên

.BTN-primary {--bs-btn-focus-shadow-rgb: none;}

Đã trả lời ngày 11 tháng 7 lúc 15:56Jul 11 at 15:56

Bài Viết Liên Quan

Chủ Đề