คุณสมบัติ user-select - การห้ามเลือกข้อความ
คุณสมบัติ user-select ควบคุมพฤติกรรมการเลือกข้อความและองค์ประกอบอื่นๆ บนหน้า
ไวยากรณ์
selector {
user-select: none | contain | all | auto | text;
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
none |
ไม่สามารถเลือกข้อความได้ |
contain |
การเลือกที่เริ่มต้นภายในองค์ประกอบจะไม่ขยายออกไปนอกขอบเขตขององค์ประกอบนั้น |
all |
หากดับเบิลคลิกเกิดขึ้นภายในองค์ประกอบที่ซ้อนอยู่ เนื้อหาทั้งหมดขององค์ประกอบแม่ที่มีค่าคุณสมบัตินี้จะถูกเลือก |
auto |
ค่าที่คำนวณได้ กำหนดโดยอัตโนมัติดังนี้:
สำหรับองค์ประกอบเทียม after และ
before
ค่าเท่ากับ none สำหรับองค์ประกอบที่แก้ไขได้
ค่าเท่ากับ contain หากองค์ประกอบแม่มีค่า
all หรือ none - องค์ประกอบลูกก็จะมีค่าเหมือนกัน
มิฉะนั้นค่าจะเป็น text
|
text |
ผู้ใช้สามารถเลือกข้อความภายในองค์ประกอบได้ |
ค่าเริ่มต้น: text
หมายเหตุ
ค่าบางค่าอาจใช้งานไม่ได้ในเบราว์เซอร์ทุกตัว
ตัวอย่าง . ค่า none
ไม่สามารถเลือกข้อความต่อไปนี้ได้:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
user-select: none;
}
:
ดูเพิ่มเติม
-
องค์ประกอบเทียม
selection,
ซึ่งควบคุมสไตล์ของข้อความที่ถูกเลือก -
คุณสมบัติ
pointer-events,
ซึ่งนำปฏิกิริยาต่อเมาส์ออก