พีวโดคลาส optional

พีวโดคลาส optional กำหนดสไตล์ ให้กับอินพุตที่ไม่ได้กำหนดแอตทริบิวต์ required, กล่าวคือ พีวโดคลาสนี้จะถูกนำไปใช้กับ อินพุตที่ไม่จำเป็นต้องกรอก

ไวยากรณ์

cssselector:optional {

}

ตัวอย่าง

มาลองกำหนดพื้นหลังสีเทา ให้กับอินพุตที่ไม่บังคับกรอก:

html<form>
  <p>
    <label>กรอกตัวเลข</label>
    <input type="number" required>
  </p>
  <p>
    <label>กรอกข้อความ</label>
    <input type="text">
  </p>
</form>

cssinput:optional {
  background-color: #D8DFE8;
}

Результат:

ดูเพิ่มเติม

พีวโดคลาส :default,
ซึ่งกำหนดสไตล์ให้กับเอลิเมนต์ตามค่าเริ่มต้น
พีวโดคลาส :indeterminate,
ซึ่งกำหนดสไตล์ให้กับสวิตช์ที่อยู่ในสถานะไม่แน่ชัด
พีวโดคลาส :placeholder-shown,
ซึ่งกำหนดสไตล์ให้กับเอลิเมนต์เมื่อแสดงข้อความช่วยเหลือ
พีวโดคลาส :read-only,
ซึ่งกำหนดสไตล์ให้กับอินพุตที่ไม่สามารถเปลี่ยนแปลงได้
พีวโดคลาส :required,
ซึ่งกำหนดสไตล์ให้กับอินพุตที่มีการกำหนดแอตทริบิวต์ required
พีวโดคลาส :focus-within,
ซึ่งกำหนดสไตล์ให้กับเอลิเมนต์ที่อยู่ในโฟกัส
พร็อปเพอร์ตี้ caret-color,
ซึ่งกำหนดสีของเคอร์เซอร์ข้อความในอินพุต