พีสยูโดคลาส read-write

พีสยูโดคลาส read-write กำหนดสไตล์ ให้กับอินพุตที่มีค่าที่สามารถ แก้ไขได้

ไวยากรณ์

cssselector:read-write {}

มาลองตั้งค่าขอบสีฟ้า ให้กับอินพุตที่สามารถป้อน ข้อมูลได้:

html<p>
  <label>ป้อนข้อความ</label>
  <input type="text">
</p>
<p>
  <label>อ่านข้อความ</label>
  <input type="text" value="text" readonly>
</p>

cssinput:read-write {
  border: 1px solid #467CBC;
}
input:read-only {
  border: 1px solid #D8DFE8;
}

Результат:

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