Hướng Dẫn Tạo Placeholder Cho select box Trong HTML/CSS SinhVienCNTT.Net

Hướng Dẫn Tạo Placeholder Cho select box Trong HTML/CSS SinhVienCNTT.Net

by sinhviencntt

HTML

<select required>
    <option value="" disabled selected>Hãy Chọn Giới Tính</option>
    <option value="nam">Nam</option>
    <option value="nu">Nữ</option>
</select>

CSS

/*select có value="" nghĩa là nó có giá trị không hợp lệ thì màu nâu được hiển thị*/
select:required:invalid {
  color: gray;
}
/*option có value="" và trạng thái disabled không được hiển thị khi nhấn vào mũi tên tam giác. Bình thường thì nó vẫn được hiển thị*/
option[value=""][disabled] {
  display: none;
}
/*option có màu đen */
option {
  color: black;
}