Bài 35: Cách sử dụng Dropdowns trong css

Cách sử dụng Dropdowns trong css

Dropdowns là một thành phần quan trọng trong thiết kế giao diện trang web, cho phépngười dùng chọn một tùy chọn từ danh sách các tùy chọn. Để tạo một dropdown trong CSS, bạn có thể sử dụng thẻ select và các thẻ option, kết hợp với CSS để tạo kiểu cho dropdown.

Dưới đây là một ví dụ về cách tạo một dropdown đơn giản bằng CSS:

HTML:

<div class="dropdown">
  <select>
    <option value="" disabled selected>Chọn một tùy chọn</option>
    <option value="option1">Tùy chọn 1</option>
    <option value="option2">Tùy chọn 2</option>
    <option value="option3">Tùy chọn 3</option>
  </select>
</div>

CSS:

.dropdown select {
  width: 200px; /* Độ rộng của dropdown */
  height: 35px; /* Chiều cao của dropdown */
  padding: 5px; /* Khoảng cách giữa đường viền và nội dung */
  font-size: 16px; /* Cỡ chữ của dropdown */
  border-radius: 5px; /* Đường cong viền của dropdown */
  border: 1px solid #ccc; /* Màu đường viền của dropdown */
  appearance: none; /* Loại bỏ mũi tên mặc định của dropdown */
  background-color: #fff; /* Màu nền của dropdown */
}

.dropdown select:focus {
  outline: none; /* Loại bỏ đường viền khi dropdown đang được tập trung */
  box-shadow: 0 0 5px #ccc; /* Hiển thị đường viền khi dropdown đang được tập trung */
}

.dropdown select option {
  font-size: 16px; /* Cỡ chữ của các tùy chọn */
  background-color: #fff; /* Màu nền của các tùy chọn */
  color: #333; /* Màu chữ của các tùy chọn */
}

Trong ví dụ này, chúng ta đã sử dụng thuộc tính width, height, padding, font-size, border-radius và border để tạo kiểu cho dropdown. Để loại bỏ mũi tên mặc định của dropdown, chúng ta đã sử dụng thuộc tính appearance. Khi dropdown được tập trung, chúng ta đã sử dụng thuộc tính outline và box-shadow để hiển thị đường viền. Để tạo kiểu cho các tùy chọn trong dropdown, chúng ta đã sử dụng thuộc tính font-size, background-color và color.

Lưu ý rằng các dropdown có thể được tùy chỉnh nhiều hơn với CSS để phù hợp với thiết kế của trang web của bạn.