พีวโดคลาส optional

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

ไวยากรณ์

selector:optional {

}

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

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

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

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