Tùy chọn chọn CSS

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 sắc, 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à một 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 có; . không có; . 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 có; . không có; . chặn Nội tuyến; . không có; . không có; . không ai; . con trỏ; . liên quan đến; . 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;

In this series on Web Forms, we’ve been learning how to create and style various form controls. In the last installment, we learned how to style radio buttons and checkboxes by first hiding them using the appearance CSS property. We’ll once again be putting the appearance property to use in order to customize the appearance of the element. It’s a tough one for several reasons. For starters, the control is made up of several sub-components. Moreover, it can also be displayed as a list in order to accept multiple selections. Finally, the Select’s appearance should change when disabled. Today’s article will cover the standard element, while the next one will cover the multiple as well as how to disable custom controls.

Tuy nhiên, trước khi chúng ta tiếp tục, bạn có thể muốn làm mới bộ nhớ của mình bằng cách xem lại các bài viết trước trong loạt bài này

• Cách xây dựng biểu mẫu web trong HTML
• Xây dựng biểu mẫu web trong HTML. Phần 2
• Styling Form Controls với CSS – Phần 3
• CSS cho Nhãn, Nút và Tương tác Biểu mẫu – Phần 4
• Tạo kiểu cho các nút radio và hộp kiểm trong biểu mẫu HTML

Anatomy of a Standard

As you can see in the image below, the standard element consists of several constituent parts, including a read-only text field that shows the currently selected item, an arrow icon, and a drop-down list:

In terms of markup, the contains a number of options. These make up the items that appear in the drop-down list, when you click on the down arrow, or any part of the text field. Here’s the markup for a that lets the user choose a favorite single from a completely random music artist:

Standard Select

  
    Make a selection
    Mouse In A Maze
    Private Life
    Suspended Animation
    No Quarter
    11:11 Ultimate Edition
    Ultraviolence
    The Core [with outro solo]
    Telekinetic Killer
    All of the above
    None of the above
  
  

Cách đặt lại kiểu CSS

Như chúng tôi đã làm với các nút radio và hộp kiểm trước đây, chúng tôi sẽ xóa điều khiển gốc bằng thuộc tính xuất hiện. CSS sau đây cũng sẽ xóa mũi tên thả xuống

select {
  // styles reset, including removing the default dropdown arrow
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  // Stack above custom arrow
  z-index: 1;

  // Remove focus outline, will add on alternate element
  outline: none;
}

The padding is a short-hand property that sets a value to each of the ’s four sides, whereby:

• phần đệm trên cùng là 0 [lưu ý rằng các đơn vị không bắt buộc đối với các giá trị bằng 0]
• phần đệm bên phải là 1em [đơn vị em có liên quan đến kích thước phông chữ của phần tử, do đó 1em có nghĩa là cùng kích thước với phông chữ hiện tại]
• phần đệm dưới cùng là 0
• phần đệm bên trái là 0

Adding Our Own Styles

The next set of rules customize the appearance of our by targeting the

:root {
  --select-border: #393939;
  --select-focus: #101484;
  --select-arrow: var[--select-border];
}

.select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var[--select-border];
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background: linear-gradient[to bottom, #ffffff 0%, #e5e5e5 100%];
}

.select {
  //custom select rules...
  
  //Custom arrow
  &::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var[--select-arrow];
    clip-path: polygon[100% 0%, 0 0%, 50% 100%];
  }
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  select,
  &::after {
    grid-area: select;
  }

  min-width: 15ch;
  max-width: 30ch;
  //etc...
}

//Custom arrow
&::after {
  content: "";
  justify-self: end;
  //etc...
}