programming css

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;

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



  
    Title of the document

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à 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8. Chúng ta sẽ tìm hiểu sâu về nó, bao gồm cả việc tạo kiểu dễ dàng hơn bao nhiêu so với phần tử 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 truyền thống. Nhưng trước tiên, hãy điền vào một số bối cảnh về lý do tại sao một thứ như 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 lại cần thiết ngay từ đầu, vì nó vẫn đang phát triển và đang trong quá trình phát triển

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 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 là nhà phát triển web kiểm soát gặp nhiều vấn đề nhất khi tạo kiểu với CSS

Mặc dù việc tạo kiểu cho giao diện của phần nút của 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 [thứ bạn nhìn thấy trong trang khi đóng cửa sổ bật lên] tương đối dễ dàng nhưng hầu như không thể tạo kiểu cho các tùy chọn [thứ bạn nhìn thấy khi cửa sổ bật lên mở], hãy để

Giao diện người dùng mặc định cho phần tử 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 trong Safari

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 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 tích hợp có thể tạo kiểu phù hợp để chúng ta không phải viết mã này nữa

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 , but dropdowns, checkboxes, radio buttons, and others too]. To achieve this, they produce specifications for how these controls should be implemented in the web platform as well as the accessibility requirements they should address.

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 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8

Dựa trên đề xuất 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 của Open UI, việc triển khai một điều khiển 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 mới đã bắt đầu trong Chromium. Công việc được thực hiện bởi nhóm Microsoft Edge, phối hợp với nhóm Google Chrome. Tính năng này thậm chí đã có sẵn trong các trình duyệt dựa trên Chromium bằng cách bật cờ "Các tính năng của Nền tảng web thử nghiệm" trong 

  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
6


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 là một điều khiển tích hợp mới cung cấp trải nghiệm người dùng lựa chọn tùy chọn, giống như 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9, với một nút hiển thị nhãn giá trị đã chọn, một cửa sổ bật lên xuất hiện khi nhấp vào nút đó và một danh sách các tùy chọn được hiển thị

Tại sao một cái tên mới?

Tại sao không chỉ thay thế điều khiển 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 hiện có?

Quan trọng hơn, điều khiển 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 hiện tại đã được sử dụng trên web trong một thời gian rất dài. Như vậy, nó có thể không bao giờ được thay đổi theo bất kỳ cách quan trọng nào mà không gây ra các vấn đề tương thích lớn

Vì vậy, kế hoạch [và hãy nhớ rằng tất cả điều này vẫn còn rất thử nghiệm] là để 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 trở thành một biện pháp kiểm soát mới, độc lập với 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9

Hãy dùng thử ngay hôm nay

Điều này chưa sẵn sàng để sử dụng sản xuất, nhưng nếu bạn hào hứng với việc sử dụng nó như tôi, thì đây là cách

  1. Mở phiên bản Canary của trình duyệt dựa trên Chromium [Chrome, Edge]
  2. Chuyển cờ "Các tính năng của Nền tảng web thử nghiệm" trong trang 
    
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    3 và khởi động lại
  3. Thay thế bất kỳ 
    
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    9 bằng 
    
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    8 trong một trang web

Đó là nó. Theo mặc định, nó sẽ không làm được gì nhiều, nhưng như chúng ta sẽ thấy sau này, bạn sẽ có thể tạo kiểu và mở rộng quyền kiểm soát khá rộng rãi với một lần thay đổi tên thẻ này

Chúng tôi thích phản hồi

Trước khi chúng tôi đi vào cách sử dụng điều khiển, nếu bạn sử dụng nó, nhóm Giao diện người dùng mở và những người làm việc về triển khai trong Chromium rất muốn nghe phản hồi của bạn nếu bạn có bất kỳ

Bằng cách trở thành người thử nghiệm sớm, bạn có thể tích cực giúp họ kiểm soát tốt hơn cho mọi người. Vì vậy, nếu bạn gặp lỗi hoặc hạn chế với thiết kế của điều khiển, vui lòng gửi phản hồi của bạn bằng cách tạo sự cố trên kho lưu trữ Open UI GitHub

Và bây giờ, hãy nói về cách điều khiển hoạt động

Giải phẫu của một điều khiển 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8

Bởi vì các phần khác nhau của menu chọn có thể được tạo kiểu, điều quan trọng trước tiên là phải hiểu giải phẫu bên trong của nó

  • 
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    8 là phần tử gốc chứa nút và hộp danh sách
  • 
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    8 là phần tử kích hoạt khả năng hiển thị của hộp danh sách
  • 
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    9 là phần tử hiển thị giá trị của tùy chọn đang chọn [không bắt buộc]. Lưu ý rằng phần này không nhất thiết phải được đặt bên trong phần 
    
  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  
    
    Open
    Choose an option
  
    
  Option 1
  Option 2
  Option 3
    8
  • 
  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  
    
    
    
      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
    1 là trình bao bọc chứa các 
    
  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  
    
    
    
      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
    2 và 
    
  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  
    
    
    
      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
    3
  • 
  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  
    
    
    
      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
    3 nhóm cùng với một nhãn tùy chọn
  • 
  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  
    
    
    
      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
    2 đại diện cho giá trị tiềm năng mà người dùng có thể chọn. Có thể có một hoặc nhiều

hành vi mặc định

Hành vi mặc định của điều khiển 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 bắt chước hành vi của điều khiển 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9. Bạn có thể sử dụng nó giống như một 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 bản địa, với đánh dấu tối thiểu sau


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
1

Khi làm như vậy, mặc định 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8, 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 và 

  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
41 > được tạo cho bạn

Các bộ phận tạo kiểu của điều khiển

Đây là nơi mọi thứ trở nên thú vị. Một cách để tạo kiểu cho điều khiển để phù hợp với yêu cầu của bạn là sử dụng phần tử giả CSS 


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
42 để chọn các phần khác nhau trong cấu trúc của điều khiển mà bạn muốn tạo kiểu

Xem xét ví dụ sau trong đó 


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
42 được sử dụng để tạo kiểu cho nút và các phần của hộp danh sách


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3

Ví dụ trên dẫn đến phong cách sau


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
42 có thể được sử dụng để tạo kiểu cho các phần 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8, 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 và 

  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  

    

      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
1 của điều khiển

Sử dụng đánh dấu của riêng bạn

Nếu những điều trên không đủ cho nhu cầu của bạn, bạn có thể tùy chỉnh điều khiển nhiều hơn nữa bằng cách cung cấp đánh dấu của riêng bạn để thay thế đánh dấu mặc định và mở rộng hoặc sắp xếp lại các bộ phận

Một 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 có các vị trí được đặt tên có thể được tham chiếu để thay thế các phần mặc định. Ví dụ: để thay thế nút mặc định bằng nút của riêng bạn, bạn có thể thực hiện như sau


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3

Thuộc tính 


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
49 trên 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
40 bên ngoài yêu cầu 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 thay thế nút mặc định của nó bằng nội dung của 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
40

Thuộc tính 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
43 trên 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 bên trong cho trình duyệt biết rằng phần tử này là thứ mà chúng tôi muốn sử dụng làm nút mới. Trình duyệt sẽ tự động áp dụng tất cả hành vi xử lý nhấp chuột và bàn phím cho phần tử này cũng như ngữ nghĩa trợ năng phù hợp

Đoạn mã trên cho kết quả theo kiểu sau

Lưu ý rằng các thuộc tính 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
45 và 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
46 cũng có thể được sử dụng trên cùng một phần tử

Bạn có thể thay thế phần listbox mặc định theo cách tương tự


  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  

    

      Option 1
      Option 2
      Option 3
      Option 4
      Option 5

Thật thú vị, 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
47 được sử dụng ở đây cũng đang được đề xuất bởi Open UI và được triển khai trong Chromium vào lúc này

Phần tử có 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
48 bắt buộc phải là một 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
47. Áp dụng 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
48 yêu cầu trình duyệt mở phần tử này khi nhấp vào nút 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 và người dùng có thể chọn 

  .my-custom-select [popup] {
    width: 300px;
    display: grid;
    grid-template-columns: repeat[auto-fit, minmax[100px, 1fr]];
    gap: 10px;
    padding: 10px;
    box-shadow: none;
    margin: 10px 0;
    border: 1px solid;
    background: #f7f7f7;
  }


  

    

      Option 1
      Option 2
      Option 3
      Option 4
      Option 5
2 bên trong nó bằng chuột, phím mũi tên và chạm

Đoạn mã trên cho kết quả theo kiểu sau

Mở rộng đánh dấu

Bạn không chỉ có thể thay thế các phần mặc định bằng phần của riêng mình, như đã thấy ở trên, mà bạn còn có thể mở rộng phần đánh dấu của điều khiển bằng cách thêm các phần tử mới. Điều này có thể hữu ích để tăng thêm hộp danh sách hoặc nút với thông tin bổ sung hoặc để thêm chức năng mới

Xem xét ví dụ sau


  .my-select-menu::part[button] {
    color: white;
    background-color: #f00;
    padding: 5px;
    border-radius: 5px;
  }

  .my-select-menu::part[listbox] {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid red;
    border-radius: 5px;
  }


  Option 1
  Option 2
  Option 3
4

Ở đây, chúng tôi đang sử dụng đánh dấu tùy chỉnh để bọc danh sách các tùy chọn và tạo nội dung của riêng mình như bên dưới

Thay thế toàn bộ DOM bóng tối

Cuối cùng, và nếu những điều trên vẫn chưa đủ, bạn cũng có thể mở rộng đánh dấu của điều khiển bằng cách thay thế hoàn toàn DOM bóng mặc định của nó bằng cách gọi 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
83. Ví dụ demo ở phần trước có thể sửa lại như sau


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
4

Được viết theo cách này, đánh dấu tùy chỉnh của 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 được gói gọn hoàn toàn trong DOM bóng tối của nó. Do đó, 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 có thể được thả vào bất kỳ trang nào mà không có nguy cơ bị ảnh hưởng bởi phong cách của nội dung xung quanh

Đóng nhận xét

Như chúng ta đã thấy, điều khiển 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 thử nghiệm mới mang lại rất nhiều tính linh hoạt khi tạo kiểu và thậm chí mở rộng một 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
9 truyền thống. Và nó thực hiện điều này theo tất cả các cách phù hợp, bởi vì nó được tích hợp vào trình duyệt, nơi xử lý khả năng truy cập và định vị nhận biết cổng xem cho bạn

Giao diện người dùng mở có nhiều tài liệu hơn về 


  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8 và nếu bạn muốn xem thêm mã cho biết cách sử dụng 

  .my-custom-select [slot='button'] {
    display: flex;
    align-content: center;
  }
  .my-custom-select button {
    padding: 5px;
    border: none;
    background: #f06;
    border-radius: 5px 0 0 5px;
    color: white;
    font-weight: bold;
  }
  .my-custom-select .label {
    padding: 5px;
    border: 1px solid #f06;
    border-radius: 0 5px 5px 0;
  }


  

    Open
    Choose an option
  

  Option 1
  Option 2
  Option 3
8, đây cũng là một vài bản trình diễn

Một lần nữa, đây là công việc đang được tiến hành và chắc chắn sẽ thay đổi do phản hồi mà nhóm Giao diện người dùng mở nhận được

Tôi nóng lòng muốn thấy các thông số kỹ thuật bắt đầu xuất hiện trong các nội dung tiêu chuẩn của HTML và CSS và để việc triển khai trở nên ổn định hơn, cũng như thấy các công cụ trình duyệt khác quan tâm đến điều này. Bạn có thể giúp thực hiện điều này. Kiểm tra quyền kiểm soát, báo cáo sự cố hoặc tham gia đều là những cách tuyệt vời để thúc đẩy nỗ lực này tiến lên

Tùy chọn được chọn là gì?

Lựa chọn tùy chọn là một chiến thuật trong đó người chơi tận dụng các hệ thống ưu tiên đầu vào nhất định để xử lý nhiều tình huống khác nhau cùng một lúc từ cùng một đầu vào. Some Option Selects take advantage of Screen Freeze, others use the Input System, and some use proximity.

Cái gì được chọn trong thẻ tùy chọn?

Thẻ xác định tất cả các tùy chọn có thể có để chọn từ .

Bài Viết Liên Quan

Đầu ra của mã Python sau g i cho i trong phạm vi 5 )) gõ G là gì?
Cách tìm phần chồng chéo giữa hai phạm vi trong Excel
Thẻ html nào được sử dụng để giao tiếp với các công cụ tìm kiếm và mô tả nội dung của trang web?
Is F1 happening in Singapore 2023?
Dấu nháy đơn trong ô excel
Hướng dẫn dùng php apache trong PHP
Cái nào không phải là từ khóa trong Python?
Kiểm tra phiên bản Python Ubuntu
Các phương thức tính phí cho 2023 LEAF Quizlet
Laravel lấy số hàng từ một truy vấn
65 feet bằng bao nhiêu mét
Tải html trong javascript
Python có được coi là cấp thấp không?
Làm thế nào để bạn tạo một mảng trong html?
Python hmac sha256 xác minh chữ ký
Pip trong ví dụ python là gì?
Cách tìm giai thừa
Có bao nhiêu nhật thực vào năm 2024 ở Ấn Độ?
Python chuyển dữ liệu vào URL JSON như thế nào?
Cách mở file html bị mã hóa trên iPhone

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
7 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
7 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
7 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
7 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
7 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
7 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
7 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
7 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
7 tháng trước

Bài mới nhất

Chúng đang tiến hóa và không ngừng đột biến năm 2024
Công thức hóa học của từng loại vitamin năm 2024
Chi phí bốc xếp hàng hóa vào container năm 2024
Chay xe đạp với đi bộ cái nào tốt hơn năm 2024
Các dạng bài tập nguyên lý thống kê kinh tế năm 2024
Toán ôn tập về biểu đồ lớp 5 năm 2024
Bảng thống kê các văn bản nhật dụng lớp 6 năm 2024
Giải bài tập toán 12 bài hàm số lũy thừa năm 2024
Lỗi application blocked by java security trên windows 10 năm 2024
Cá câu 5 đề toán thi vào lớp 10 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng Bài tập So Sánh Tiếng anh So sánh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Thế nào Ở đâu Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học