จัดสไตล์ตัวเลือก Select ด้วย CSS

เพื่อจัดสไตล์ตัวเลือกใน <select> ให้ใช้ CSS selector สำหรับ select element

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    select {
      width: 100%;
      padding: 10px 15px;
      border: 1px dashed blue;
      border-radius: 4px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <p>เลือกหัวข้อ:</p>
  <form>
    <select id="country" name="country">
      <option value="java">Java</option>
      <option value="ruby">Ruby</option>
      <option value="oracle">Oracle</option>
      <option value="tableau">Tableau</option>
    </select>
  </form>
</body>
</html>

หมายเหตุ: การจัดสไตล์ <option> ภายใน dropdown มีข้อจำกัดในบราวเซอร์บางตัว ส่วนใหญ่จัดสไตล์ได้แค่ <select> ตัวหลักเท่านั้น สำหรับ custom dropdown แบบเต็มรูปแบบ อาจต้องใช้ JavaScript หรือไลบรารีเสริม