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

that encloses the element:

Nhưng trước khi chúng ta hiểu điều đó, đây là điều gì đó trong CSS mà bạn có thể chưa từng thấy trước đây

:root {
  --select-border: #393939;
  --select-focus: #101484;
  --select-arrow: var(--select-border);
}

Đây là các biến CSS. Chúng thực sự hữu ích để xác định màu sắc mà bạn muốn sử dụng ở một vài nơi. Phương thức var() đọc giá trị của biến. Bạn có thể thấy biến –select-border được đọc bên dưới

.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%);
}

Ch là một đơn vị CSS có liên quan đến độ rộng ký tự của “0” (không). Do đó, giá trị 15ch gấp 15 lần chiều rộng của ký tự “0“

Here’s our

at this point:

 

Lưu ý rằng nó vẫn thiếu mũi tên xuống. Hãy thêm nó ngay bây giờ

Creating the Custom Arrow in CSS

Để hiển thị mũi tên thả xuống, chúng tôi sẽ sử dụng thuộc tính CSS hiện đại có tên là clip-path. Các đường dẫn clip cho phép chúng tôi tạo tất cả các loại hình dạng bằng cách “cắt bớt” các hình dạng hình vuông và hình chữ nhật khác mà chúng tôi lấy làm mặc định cho hầu hết các phần tử. Trước khi có thuộc tính clip-path, SVG sẽ là giải pháp phù hợp. Tuy nhiên, nó không hoạt động tốt dưới dạng nền vì chúng tôi không thể thay đổi giao diện của nó theo bất kỳ cách nào mà không xác định lại toàn bộ SVG. Nó cũng sẽ không hỗ trợ việc sử dụng các biến tùy chỉnh CSS

We’ll define the arrow as an :after pseudo-element of the .select

:

.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%);
  }
}

Bạn có thể tự hỏi những gì &. sau khi làm. Nó là một phần của Sass (Syntactally Awesome StyleSheets), là một phần mở rộng CSS biên dịch thành CSS thẳng. Nó làm cho CSS dễ viết mã hơn và loại bỏ rất nhiều sự trùng lặp. Nó thực hiện điều đó – ít nhất là một phần – thông qua việc lồng ghép. Ký tự dấu và đề cập đến bộ chọn gốc khi lồng

Định vị mũi tên

In order to accommodate the :after‘s width, we have to update the .select rule to use a CSS grid layout. Then, to position the arrow, we’ll define a grid-template-areas called “select” and add a rule that assigns it to the element and ::after content. The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property, and then reference the name defined by the grid-template-areas property:

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

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

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

Bây giờ chúng ta có thể nói với. chọn để căn chỉnh các mục ở giữa (xem đoạn mã trên), đồng thời căn chỉnh các mục. sau nội dung ở “cuối” thông qua thuộc tính justify-self

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

Đây cuối cùng là kết quả hoàn thành

 

Bạn sẽ tìm thấy bản demo cho hướng dẫn này trên codepen. io

Phần kết luận

Trong phần này của loạt bài Xây dựng biểu mẫu web bằng HTML, chúng tôi đã sử dụng một số thuộc tính CSS mới, bao gồm diện mạo và khu vực mẫu lưới để tùy chỉnh diện mạo của một thành phần tiêu chuẩn. Bài viết tiếp theo sẽ đề cập đến nhiều cũng như cách vô hiệu hóa điều khiển tùy chỉnh. Phần cuối của loạt bài sẽ chuyển hướng để giải thích về vai trò của JavaScript trong việc làm cho các biểu mẫu HTML trở nên tương tác hơn

Làm cách nào để chọn kiểu bằng CSS?

Có nhiều cách để thiết kế menu thả xuống Mỗi tùy chọn menu có thể được xác định bởi phần tử .

Cách THIẾT LẬP Chọn tùy chọn trong HTML?

Thẻ select trong HTML được sử dụng để tạo danh sách thả xuống gồm các tùy chọn có thể được chọn. Thẻ tùy chọn chứa giá trị sẽ được sử dụng khi được chọn. Có thể đặt giá trị mặc định của phần tử được chọn bằng cách sử dụng thuộc tính 'đã chọn' trên tùy chọn bắt buộc . Đây là một thuộc tính boolean.

Đọc tiếp