ตัวเลือก read-only

ตัวเลือก read-only กำหนดสไตล์ ให้กับอินพุตที่มีแอตทริบิวต์ readonly อินพุตดังกล่าวมีไว้สำหรับการอ่านเท่านั้น กล่าวคือไม่สามารถป้อนหรือเปลี่ยนแปลงข้อมูล ภายในได้ อย่างไรก็ตามสามารถเลือกข้อมูล และคัดลอกได้

โครงสร้าง

ตัวเลือก:read-only {
	
}

ตัวอย่าง

มาตั้งค่าขอบสีเทาอ่อน ให้กับอินพุตที่กำหนดให้อ่านอย่างเดียว

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

input:read-only {
	border: 1px solid #D8DFE8;
}

ดูเพิ่มเติม

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