Bootstrap 4 chọn kiểu mũi tên

Bootstrap cung cấp cho chúng ta một phần tử chọn đẹp, rõ ràng — không giống như kiểu dáng mặc định khá xấu xí mà trình duyệt áp dụng. Đôi khi, sẽ rất tuyệt nếu tùy chỉnh mũi tên đã chọn và tạo giao diện độc đáo

Hãy xem điều này có thể được thực hiện nhanh chóng và dễ dàng như thế nào

Chúng tôi sử dụng Bootstrap 5 ở đây, một điểm khác biệt quan trọng, vì có những thay đổi về thành phần biểu mẫu so với Bootstrap 4

Tự phối màu

Biểu tượng thực sự là một hình nền được đặt trên phần tử được chọn. Như chúng ta đã biết, chúng ta không thể áp dụng màu sắc cho hình nền. Vì hình nền là biểu tượng svg nên chúng ta cần điều chỉnh thuộc tính nét vẽ của svg

Nếu chúng tôi kiểm tra phần tử, chúng tôi sẽ thấy rằng một url dữ liệu được sử dụng

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

Cũng giống như một lưu ý phụ, đường dẫn đến tệp svg bên ngoài cũng có thể được sử dụng ở đây. Mọi thứ sau dấu phẩy đầu tiên chỉ là nội dung được mã hóa url của tệp svg

Lưu ý rằng chuỗi được mã hóa url

stroke='%23343a40'

Nếu chúng ta ném cái này vào bộ mã hóa/giải mã url, chúng ta sẽ có màu mặc định

stroke='#343a40'

Bây giờ, hãy thay đổi nó thành một màu xanh đẹp. #2596be. Bạn chỉ có thể sao chép quy tắc tạo kiểu mặc định và ghi đè lên giá trị nét vẽ. Đảm bảo thay thế dấu thăng bằng %23 để mã hóa phù hợp

Tôi cũng sẽ thêm thuộc tính màu để khớp văn bản với biểu tượng

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232596be' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color: #2596be;
}

Kết quả

kích thước tùy chỉnh

Điều này là khá đơn giản. Nhưng để hoàn thiện, tôi cũng bao gồm nó. Chúng tôi đã xác định rằng chúng tôi đang xử lý một hình nền ở đây. Đó là lý do tại sao chúng ta có thể chỉ cần điều chỉnh thuộc tính kích thước nền

Mặc định

.form-select {
    background-size: 16px 12px;
}

Chúng tôi đặt chiều rộng thành 20px và chiều cao sẽ tự động điều chỉnh theo tỷ lệ của biểu tượng

.form-select {
    background-size: 20px auto;
}

Kết quả (bao gồm mã trước cho màu sắc và hình nền)

Biểu tượng tùy chỉnh

Thậm chí có thể thay đổi hoàn toàn biểu tượng. Người ta có thể lập luận rằng các biểu tượng này ít nhất phải giống nhau một cách mơ hồ trên các trang web để không gây nhầm lẫn cho người dùng. Vì vậy, khi tùy chỉnh, tốt nhất bạn nên sử dụng các biểu tượng cho biết việc chuyển đổi danh sách thả xuống. Chẳng hạn như bất kỳ biến thể nào của mũi tên hướng xuống. Tôi chọn một cái khá xấu, chỉ vì nó miễn phí từ fontawesome. Chỉ cần sao chép mã svg tại fontawesome, ném nó vào bộ mã hóa url, sau đó dán nó, dưới dạng url dữ liệu hoặc vào tệp svg. Sau đó, bạn có thể điều chỉnh màu sắc, giống như chúng tôi đã làm trước đó. Tôi cũng đã điều chỉnh kích thước nền

.custom-select-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%20fill%3D%22%232596be%22%3E%3C%21--%21%20Font%20Awesome%20Pro%206.2.0%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20%28Commercial%20License%29%20Copyright%202022%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M182.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-96%2096c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L128%20109.3V402.7L86.6%20361.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l96%2096c12.5%2012.5%2032.8%2012.5%2045.3%200l96-96c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20402.7V109.3l41.4%2041.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-96-96z%22%2F%3E%3C%2Fsvg%3E");
    background-size: 10px auto;
}

Kết quả

Như tôi đã nói, không phải là biểu tượng đẹp nhất cho mục đích này, nhưng nó là một ví dụ

Phần kết luận

Rất dễ dàng để tùy chỉnh biểu tượng chọn Bootstrap tiêu chuẩn. Bạn có thể tự điều chỉnh kích thước, màu sắc và biểu tượng. Tuy nhiên, đừng phát điên với việc thay thế biểu tượng đã chọn, vì nó sẽ vẫn là một chỉ báo nhất quán cho hành động chuyển đổi trên các trang web. Khi sử dụng url dữ liệu, hãy nhớ mã hóa url cho chúng

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter, LinkedIn, YouTube và Discord. Quan tâm đến hacking tăng trưởng?