CSS ปิดใช้งานการเลือกข้อความ

94

ขณะนี้ฉันได้ใส่สิ่งนี้ไว้ในแท็กเนื้อหาเพื่อปิดใช้งานการเลือกข้อความ:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

อย่างไรก็ตามตอนนี้ฉันinputและtextareaกล่องไม่สามารถเลือกได้ ฉันจะเลือกเฉพาะองค์ประกอบอินพุตเหล่านี้ได้อย่างไรและส่วนที่เหลือไม่สามารถเลือกได้?

css

— นีล
แหล่งที่มา

ฉันสามารถเลือกinputและtextareaองค์ประกอบ: jsfiddle.net/Smy26

— Sampson

ดูเหมือนว่า webkit จะอนุญาตให้เลือกองค์ประกอบเหล่านั้นได้ แต่ moz ไม่สามารถทำได้

— คริสเตียน

5

เป็นไปได้ที่จะทำซ้ำกฎ CSS เพื่อปิดใช้งานการไฮไลต์การเลือกข้อความ

— Mottie

175

อย่าใช้คุณสมบัติเหล่านี้กับร่างกายทั้งหมด ย้ายไปที่ชั้นเรียนและใช้ชั้นเรียนนั้นกับองค์ประกอบที่คุณต้องการปิดใช้งานเลือก:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

— บางครั้งชัยชนะ
แหล่งที่มา

3

ไม่รองรับ Chrome, Safari

— knutole

5

@knutole อ่านตารางอีกครั้ง คุ้มค่าของการelementไม่ได้รับการสนับสนุนใน Chrome / Safari

— MForMarlon

32

คุณยังสามารถปิดการใช้งานผู้ใช้เลือกในองค์ประกอบทั้งหมด:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

และกว่าจะเปิดใช้งานบนองค์ประกอบที่คุณต้องการให้ผู้ใช้สามารถเลือก:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

— Rik
แหล่งที่มา

1

สำหรับการสนับสนุนเบราว์เซอร์เต็มรูปแบบคุณควรเพิ่มแอตทริบิวต์ต่อไปนี้ในองค์ประกอบ <body> หรือ <div> ของคุณ: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * ใช้ด้วยความระมัดระวังแอตทริบิวต์สุดท้ายสามารถ AFFECT ที่มีอยู่ FUNCTOIONALITY * /

— แดน

11

แค่อยากจะสรุปทุกอย่าง:

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

— Meglio
แหล่งที่มา

1

Firefox เวอร์ชันเก่าอาจต้องเพิ่มแอตทริบิวต์อีกหนึ่งรายการให้กับ HTML: onmousedown = "return false"

— Dan

2

::selection,::moz-selection {color:currentColor;background:transparent}

— BT
แหล่งที่มา

ตามที่ระบุไว้ที่นี่w3schools.com/cssref/sel_selection.asp . นี่ไม่ใช่ส่วนหนึ่งของข้อกำหนด CSS ใด ๆ จนถึงขณะนี้และ Firefox ต้องการ -moz- ที่ถูกต้องควรเป็น :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}

— Vladislav

1

@Vladislav จุดดีเกี่ยวกับคำนำหน้า moz บอกตามตรงว่าอย่าไว้ใจ w3schools มันเป็นแหล่งที่น่ากลัว MDN ให้เกิดขึ้นจริงรุ่นเข้ากันได้ของเบราว์เซอร์และบันทึกที่ :: เลือกถูกลบออกจากร่าง CSS แต่ถูกเพิ่มกลับ: developer.mozilla.org/en-US/docs/Web/CSS/::selection หมายเหตุอีกประการหนึ่ง firefox พร้อมที่จะลบความต้องการคำนำหน้า: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

คุณสามารถปิดใช้งานการเลือกทั้งหมด

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

ตอนนี้คุณสามารถเปิดใช้งานการป้อนข้อมูลและเปิดใช้งานพื้นที่ข้อความ

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

— Shahnawaz
แหล่งที่มา

1

ใช้ตัวเลือกไวด์การ์ด*เพื่อจุดประสงค์นี้

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

ตอนนี้ทุกองค์ประกอบภายใน div ที่มี id divจะไม่มีการเลือก

การสาธิต

— Starx
แหล่งที่มา

0

แทนที่จะbodyพิมพ์รายการองค์ประกอบที่คุณต้องการ

— Eric Fortis
แหล่งที่มา

0

ฉันเห็นด้วยกับ Something Victory คุณต้องเพิ่มคลาสเฉพาะในองค์ประกอบบางอย่างที่คุณต้องการให้เลือกไม่ได้

นอกจากนี้คุณสามารถเพิ่มคลาสนี้ในบางกรณีโดยใช้จาวาสคริปต์ ตัวอย่างที่นี่ทำเนื้อหา unselectable ด้วยความช่วยเหลือของ CSS

— starikovs
แหล่งที่มา

0

ปิดการใช้งานการเลือกทุกที่

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

— คริสเตียโนเจดา
แหล่งที่มา