search

Hướng dẫn react bootstrap remove button outline - react bootstrap loại bỏ đường viền nút

1 năms trước
Trả lời: 0
Lượt xem: 8

Đã hỏi 4 năm, 9 tháng trước 4 years, 9 months ago

Show

Đã xem 12k lần 12k times

Tôi đang sử dụng CSS này

.reasonButton:focus{
   color: #fff;
    background-color: #676666;
    border-color: #adadad;
    outline: none;
}

Có ai có thể giúp tôi với vấn đề này không? Cảm ơn

Đã hỏi ngày 8 tháng 2 năm 2018 lúc 12:11Feb 8, 2018 at 12:11

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

Trong trường hợp của tôi, nó đã được giải quyết bằng cách sử dụng mã trên

Đã trả lời ngày 8 tháng 2 năm 2018 lúc 12:17Feb 8, 2018 at 12:17

Hướng dẫn react bootstrap remove button outline - react bootstrap loại bỏ đường viền nút

Karan Shawkaran ShawKaran Shaw

1.0169 huy hiệu bạc11 huy hiệu đồng9 silver badges11 bronze badges

0

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

Đã trả lời ngày 8 tháng 9 năm 2021 lúc 7:30Sep 8, 2021 at 7:30

Hướng dẫn react bootstrap remove button outline - react bootstrap loại bỏ đường viền nút

nút

Sử dụng các kiểu nút tùy chỉnh Bootstrap, cho các hành động trong các biểu mẫu, hộp thoại và nhiều hơn nữa với sự hỗ trợ cho nhiều kích cỡ, trạng thái và hơn thế nữa.

Ví dụ

Sử dụng bất kỳ loại kiểu nút có sẵn nào để nhanh chóng tạo nút theo kiểu. Chỉ cần sửa đổi prop variant.

{''}} {''} {''} {''} {''} {''}} {''}); } Xuất TypesExample mặc định;

Các nút phác thảo

Đối với một cảm ứng nhẹ hơn, các nút cũng có các biến thể outline-* không có màu nền.

{''}} {''} {''} {''} {''} {''}} {''}); } Xuất mặc định outlinetypesexample;

Thông thường các thành phần <Button> sẽ hiển thị phần tử HTML <button>. Tuy nhiên, bạn có thể hiển thị bất cứ điều gì bạn muốn, việc thêm href prop sẽ tự động hiển thị một phần tử <a />. Bạn có thể sử dụng as prop để làm cho bất cứ điều gì trái tim bạn mong muốn. React Bootstrap sẽ đảm nhiệm các vai trò ARIA thích hợp cho bạn.

Kích thước

Fancy lớn hơn hoặc nhỏ hơn các nút? Thêm 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
0, 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
1 cho các kích thước bổ sung.

Các nút chặn

Tạo các ngăn xếp đáp ứng của các nút có chiều rộng đầy đủ, các nút khối, giống như các nút trong Bootstrap 4 với sự pha trộn giữa các tiện ích hiển thị và khoảng cách của chúng tôi.

Trạng thái tích cực

Để đặt trạng thái hoạt động của nút, chỉ cần đặt prop 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
2 của thành phần.

{''}); } Xuất mặc định ActiveExample;

Trạng thái vô hiệu hóa

Làm cho các nút trông không hoạt động bằng cách thêm 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
3 prop vào.

{''} {''}); } Xuất mặc định DISABSEXample;

Coi chừng! 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4 Các yếu tố không tự nhiên hỗ trợ thuộc tính 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
3. Trong các trình duyệt hỗ trợ nó được xử lý với kiểu 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
6 nhưng không phải tất cả các trình duyệt đều hỗ trợ nó.

React Bootstrap sẽ ngăn mọi người xử lý 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
7 bắn bất kể phần tử được kết xuất.

Trạng thái tải nút

Khi kích hoạt một hành động không đồng bộ từ một nút, đó là một mẫu UX tốt để cung cấp cho người dùng phản hồi về trạng thái tải, điều này có thể dễ dàng được thực hiện bằng cách cập nhật các đạo cụ ____18 của bạn từ thay đổi trạng thái như dưới đây.

Hộp kiểm / radio

Các nút cũng có thể được sử dụng để tạo kiểu các yếu tố mẫu 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
9 và 
button:focus {
  box-shadow: none !important;
}
0. Điều này rất hữu ích khi bạn muốn một nút chuyển đổi hoạt động gọn gàng bên trong biểu mẫu HTML.

Các kiểu xử lý ở trên, nhưng yêu cầu kiểm soát trạng thái 

button:focus {
  box-shadow: none !important;
}
1 theo cách thủ công cho mỗi radio hoặc hộp kiểm trong nhóm.

Để có trải nghiệm đẹp hơn với quản lý trạng thái được kiểm tra, hãy sử dụng 

button:focus {
  box-shadow: none !important;
}
2 thay vì thành phần 
button:focus {
  box-shadow: none !important;
}
3. Nhóm hoạt động như một thành phần biểu mẫu, trong đó 
button:focus {
  box-shadow: none !important;
}
4 là một mảng của các ____24 được chọn cho một nhóm kiểm tra có tên hoặc nhóm được chuyển đổi 
button:focus {
  box-shadow: none !important;
}
4 trong một nhóm radio có tên tương tự.

Không kiểm soát được

Kiểm soát

API

button:focus {
  box-shadow: none !important;
}
7Copy Mã nhập cho thành phần nútCopy import code for the Button component

TênLoại hìnhMặc địnhSự mô tả
tích cực

boolean

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

Đặt thủ công trạng thái trực quan của nút thành 

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

như

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa

boolean

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

Đặt thủ công trạng thái trực quan của nút thành 

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

như

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4 | variant5

href

sợi dây

Cung cấp một href sẽ hiển thị một phần tử 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4, được tạo kiểu như một nút. | variant7 | variant8 | variant9

kích thước

variant4 | variant5

Chỉ định một nút lớn hoặc nhỏ.

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 

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

outline-*2

href

outline-*3

sợi dây

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóaThis is an escape hatch for working with heavily customized bootstrap css.

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4Copy import code for the ToggleButtonGroup component

hrefsợi dâyCung cấp một href sẽ hiển thị một phần tử 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4, được tạo kiểu như một nút.		Sự mô tả
kích thước

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4

function

href

sợi dây

Vô hiệu hóa

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4 | variant5

href

sợi dây

Cung cấp một href sẽ hiển thị một phần tử 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4, được tạo kiểu như một nút. | outline-*8

kích thước

variant4 | variant5

Chỉ định một nút lớn hoặc nhỏ.

loại hình

variant6 | variant7 | variant8 | variant9

variant6

Xác định thuộc tính loại nút HTML.

boolean

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

khác nhau

outline-*1Copy import code for the ToggleButton component

hrefsợi dâyCung cấp một href sẽ hiển thị một phần tử 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4, được tạo kiểu như một nút.		Sự mô tả
kích thước

boolean

variant4 | variant5

Vô hiệu hóa

boolean

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 

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

href

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 

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

href

kích thước

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóa nút, ngăn chặn các sự kiện chuột, ngay cả khi thành phần cơ bản là phần tử 
.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4

function

href

sợi dây

Cung cấp một href sẽ hiển thị một phần tử 

.btn:focus {
    outline: none !important;
    outline-offset: none !important;
}
4, được tạo kiểu như một nút. | outline-*8

kích thước

variant4 | variant5

Chỉ định một nút lớn hoặc nhỏ.

loại hình

sợi dây

loại nguyên tố

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này.

Vô hiệu hóaThis is an escape hatch for working with heavily customized bootstrap css.

Làm cách nào để xóa một phác thảo BTN khỏi bootstrap?

Tôi đã đặt cái này:. BTN: Di chuột,. ....
Nếu bạn muốn xóa phác thảo trong quá trình nhấp chuột, hãy thử điều này: .btn: Focus, .btn: Active: Focus, .Btn.Active: Focus {Outline: none; !! quan trọng; kiểu phác thảo: Không có; } ....
Có ai biết tại sao họ làm điều đó không? ....
Đường viền chấm chấm được sử dụng như một công cụ khi điều hướng trang web bằng bàn phím. ....

Làm cách nào để loại bỏ một phác thảo màu xanh trong bootstrap?

Trả lời: Sử dụng thuộc tính CSS phác thảo trong các điều khiển biểu mẫu Trình duyệt Google Chrome như và được tô sáng bằng phác thảo màu xanh xung quanh chúng trên Focus.Đây là hành vi mặc định của Chrome, tuy nhiên nếu bạn không thích nó, bạn có thể dễ dàng xóa cái này bằng cách đặt thuộc tính phác thảo của chúng thành không có.Use CSS outline property In Google Chrome browser form controls like ,