Đã hỏi 4 năm, 9 tháng trước 4 years, 9 months ago
Đã 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
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
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í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. |
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 |
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. |