Tùy chọn CSS đã chọn
|
Trong một thời gian dài, thật khó để tạo kiểu cho phần tử trên tất cả các trình duyệt. Hóa ra, một tập hợp các phong cách hợp lý có thể tạo ra một hộp lựa chọn nhất quán và hấp dẫn trên các trình duyệt mới trong khi vẫn ổn trong các trình duyệt cũ hơn. Có một số thành phần của hộp chọn có thể được tạo kiểu, đặc biệt là chiều cao, chiều rộng, phông chữ, đường viền, màu, phần đệm, bóng hộp và màu nền. Tiêu đề của tài liệu. hộp { chiều rộng. 120px; . 30px; . 1px cố định #999; . 18px; . #1c87c9; . #eee; . 5px; . 4px 4px #ccc; Show
Hộp chọn theo kiểu Một hộp chọn bình thường Hộp chọn theo kiểu Tuy nhiên, mũi tên thả xuống khó chịu liên tục giữ nguyên. Không có cách trực tiếp để tạo kiểu cho nó, nhưng có một số thủ thuật có thể được sử dụng để thay đổi mũi tên thả xuống mặc định. Hãy thảo luận về một số phương pháp dưới đây Để ẩn mũi tên mặc định của trình đơn thả xuống, hãy đặt thuộc tính giao diện CSS thành giá trị "không", sau đó thêm mũi tên riêng của bạn với sự trợ giúp của thuộc tính tốc ký nền. Lưu ý rằng thuộc tính xuất hiện vẫn được coi là công nghệ thử nghiệm và bạn cần sử dụng tiền tố -moz- (đối với Firefox) và -webkit- (đối với Chrome, Safari, Opera) để tương thích tối đa với trình duyệt. Tiêu đề của tài liệu select { chiều rộng. 140px; . 35px; . 5px 35px 5px 5px; . 18px; . 2px rắn #ccc; . không ai; . không ai; . không ai; . url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf. png") 96%/15% không lặp lại #eee; } Đầu tiên, đặt phần tử hộp vào vùng chứa có chiều rộng cố định và đặt phần tràn thành "ẩn". Sau đó, cung cấp cho phần tử chiều rộng lớn hơn 20 pixel so với chiều rộng yếu tố. Điều này sẽ ẩn mũi tên thả xuống mặc định (vì tràn. ẩn trên vùng chứa), và bây giờ có thể áp dụng hình nền ở phía bên phải của . Phương pháp này rất tốt để sử dụng vì tất cả các trình duyệt đều hỗ trợ tràn hiệu quả. ẩn giấu Lưu ý rằng nhược điểm của phương pháp này là các tùy chọn được mở rộng trực quan hơn so với menu chọn Thuộc tính sự kiện con trỏ CSS có thể được sử dụng để tạo danh sách thả xuống riêng lẻ, bằng cách phủ một phần tử lên mũi tên thả xuống gốc (để tạo tùy chỉnh) và không cho phép sự kiện con trỏ trên đó. Phương pháp này hoạt động tốt và có hỗ trợ trình duyệt tuyệt vời. Khá đẹp khi sử dụng các dấu ưa thích của bạn thay vì dấu hiệu thả xuống khó chịu của hộp Đặt các dấu trong thuộc tính nội dung và đặt phông chữ tương ứng để trông đẹp mắt. Ở đây, chúng tôi đặt "Consolas" và "monospace". Sau đó, bạn cần xoay các dấu chấm câu bằng thuộc tính biến đổi CSS Ở đây, hộp được chèn vào một phần tử để chúng ta có thể đặt con trỏ cho nó ngay cả khi thuộc tính pointer-events được đặt thành "none". Tiêu đề của tài liệu select { chiều rộng. 140px; . 35px; . 4px; . 4px; . 2px 2px 8px #999; . #eee; . không ai; . không ai; . chặn Nội tuyến; . không ai; . không ai; . không ai; . con trỏ; . quan hệ; . sau { nội dung. ''; . 11px "Consolas", đơn cách; . #666; . xoay (90 độ); . xoay (90 độ); . xoay (90 độ); . 8px; . 2px; . 0 0 2px; . 1px rắn #ddd; . tuyệt đối; . không ai; . trước { nội dung. ''; . 6px; . 0px; . 20px; . 20px; . #eee; . tuyệt đối; . không ai; . khối; Tôi muốn giới thiệu với bạn một điều khiển biểu mẫu thử nghiệm mới có tên là Hãy hỏi bất kỳ nhà phát triển web nào mà họ nghĩ rằng nền tảng web ngày nay còn thiếu điều gì, rất có thể khả năng tạo kiểu cho các điều khiển biểu mẫu sẽ nằm trong danh sách của họ. Trên thực tế, kiểu dáng biểu mẫu đã được bình chọn là một trong 10 điều còn thiếu hàng đầu trong Khảo sát trạng thái CSS năm 2020. Sau đó, Greg Whitworth đã khảo sát thêm, người đã chỉ ra rằng Mặc dù việc tạo kiểu cho giao diện của phần nút của Do đó, các hệ thống thiết kế và thư viện thành phần đã triển khai các lựa chọn của riêng chúng, được tạo từ đầu bằng cách sử dụng đánh dấu HTML tùy chỉnh, CSS và thường là rất nhiều JavaScript để có thứ gì đó tích hợp độc đáo với các thành phần khác Thật không may, làm như vậy một cách chính xác với ngữ nghĩa trợ năng phù hợp, hỗ trợ bàn phím và định vị cửa sổ bật lên không dễ dàng. Các nhà phát triển web đã dành hàng giờ đồng hồ trong nhiều năm, cố gắng giải quyết lặp đi lặp lại cùng một vấn đề và có rất nhiều lựa chọn không thể truy cập được ngoài kia Đã đến lúc chúng ta có một Sáng kiến giao diện người dùng mởGiao diện người dùng mở là một nhóm các nhà phát triển, nhà thiết kế và người triển khai trình duyệt đã đặt mục tiêu giải quyết chính xác vấn đề này và trong khi giải quyết vấn đề đó, họ cũng giải quyết các điều khiển còn thiếu khác The purpose of Open UI is to eventually make it possible for web developers to style and extend built-in UI controls (this includes Dự án vẫn còn ở giai đoạn sơ khai, nhưng mọi thứ đang tiến triển nhanh chóng và như chúng ta sẽ thấy bên dưới, những điều thú vị đã và đang xảy ra Bạn có thể tham gia nhóm và tham gia vào các cuộc họp, nghiên cứu và nỗ lực đặc tả Điều khiển
Choose an option
|
