<option>: Phần tử HTML Option

Try it

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

disabled

Nếu thuộc tính Boolean này được đặt, tùy chọn này không thể được chọn. Thường trình duyệt làm xám điều khiển như vậy và nó sẽ không nhận bất kỳ sự kiện duyệt nào, như nhấp chuột hoặc sự kiện liên quan đến tiêu điểm. Nếu thuộc tính này không được đặt, phần tử vẫn có thể bị vô hiệu hóa nếu một trong các tổ tiên của nó là phần tử <optgroup> bị vô hiệu hóa.

label

Thuộc tính này là văn bản cho nhãn chỉ ra ý nghĩa của tùy chọn. Nếu thuộc tính label không được định nghĩa, giá trị của nó là nội dung văn bản của phần tử.

selected

Nếu có, thuộc tính Boolean này cho biết tùy chọn được chọn ban đầu. Nếu phần tử <option> là hậu duệ của phần tử <select> không có thuộc tính multiple, chỉ một <option> duy nhất của phần tử <select> này có thể có thuộc tính selected.

value

Nội dung của thuộc tính này đại diện cho giá trị cần gửi cùng form, nếu tùy chọn này được chọn. Nếu thuộc tính này bị bỏ qua, giá trị được lấy từ nội dung văn bản của phần tử option.

Tạo kiểu với CSS

Lịch sử, tạo kiểu cho các phần tử <option> bị giới hạn cao. Các phần tử select có thể tùy chỉnh giải thích các tính năng mới hơn cho phép tùy chỉnh đầy đủ chúng, giống như bất kỳ phần tử DOM thông thường nào.

Tạo kiểu option cũ

Trong các trình duyệt không hỗ trợ các tính năng tùy chỉnh hiện đại (hoặc cơ sở mã cũ không thể sử dụng), tạo kiểu có sẵn trên các phần tử <option> phụ thuộc vào trình duyệt và hệ điều hành. Tùy thuộc vào hệ điều hành, font-size của <select> sở hữu được tôn trọng trong Firefox và Chromium. Chromium cũng có thể cho phép đặt color, background-color, font-family, font-variant, và text-align.

Bạn có thể tìm thêm chi tiết về tạo kiểu <option> cũ trong hướng dẫn của chúng tôi về tạo kiểu form nâng cao.

Ví dụ

Xem <select> để biết ví dụ.

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Các phần tử liên quan đến form khác: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <input>, <output>, <progress> và <meter>.
• Phần tử select có thể tùy chỉnh