CSS टेक्स्ट चयन को अक्षम करता है

93

वर्तमान में, मैंने पाठ चयनों को अक्षम करने के लिए इसे बॉडी टैग में रखा है:

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

हालाँकि, मेरे inputऔर textareaबक्से अब अचूक हैं। मैं केवल इन इनपुट तत्वों को कैसे चुन सकता हूं और बाकी को अचयनित कर सकता हूं?

css

— नील
स्रोत

मैं सेलेक्ट inputऔर textareaएलिमेंट्स कर पा रहा हूं : jsfiddle.net/Smy26

— सैम्पसन

ऐसा लगता है कि वेबकिट उन तत्वों पर चयन की अनुमति देता है, लेकिन moz नहीं करता है।

— ईसाई

5

पाठ चयन हाइलाइटिंग को अक्षम करने के लिए सीएसएस नियम के

— Mottie

172

इन गुणों को पूरे शरीर पर लागू न करें। उन्हें एक कक्षा में ले जाएं और उस वर्ग को उन तत्वों पर लागू करें जिन्हें आप चयनित करना चाहते हैं:

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

— सोमेत विजय
स्रोत

3

क्रोम, सफारी में समर्थित नहीं है ।

— knutole

5

@knutole तालिका को फिर से पढ़ें। मूल्य के elementक्रोम / सफारी में समर्थित नहीं है।

— एमफोरमार्नलन

31

आप सभी तत्वों पर उपयोगकर्ता का चयन अक्षम कर सकते हैं:

* {
    -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;
}

— रिक
स्रोत

1

पूर्ण ब्राउज़र समर्थन के लिए आपको अपने <body> या <div> तत्व में निम्नलिखित विशेषताएँ जोड़नी चाहिए: अचयनित = "हाँ" onselectstart = "असत्य" onmousedown = "असत्य वापस लौटें" / * देखभाल के साथ उपयोग करें, अंतिम विशेषता AFFECT EXISTING 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

फ़ायरफ़ॉक्स के पुराने संस्करणों को HTML में एक और विशेषता जोड़ने की आवश्यकता हो सकती है: onmousedown = "false false"

— Dan

2

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

— बीटी
स्रोत

जैसा कि यहां कहा गया है w3schools.com/cssref/sel_selection.asp । यह अब तक किसी भी सीएसएस विनिर्देश का हिस्सा नहीं है, और फ़ायरफ़ॉक्स को -मोज़ की आवश्यकता है। तो सही होना चाहिए: :: - moz-Selection {color: currentColor; बैकग्राउंड: पारदर्शी} :: सिलेक्शन {color, currentColor; बैकग्राउंड: पारदर्शी}

— व्लादिस्लाव

1

@ व्लादिस्लाव मोज उपसर्ग के बारे में अच्छी बात है। ईमानदारी से, w3schools पर भरोसा मत करो। इसका इतना भयानक स्रोत। MDN वास्तविक ब्राउज़र संगतता संस्करण और नोट देता है कि :: चयन सीएसएस मसौदे से हटा दिया गया था, लेकिन वापस जोड़ा गया था: developer.mozilla.org/en-US/docs/Web/CSS/::selection । एक अन्य नोट, फ़ायरफ़ॉक्स उपसर्ग की आवश्यकता को दूर करने के लिए तैयार है: 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;}

— शाहनवाज
स्रोत

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 के अंदर हर तत्व divका कोई चयन नहीं होगा।

डेमो

— Starx
स्रोत

0

इसके बजाय bodyआप चाहते हैं तत्वों की एक सूची टाइप करें।

— एरिक फोर्टिस
स्रोत

0

मैं सोमेथ विजय से सहमत हूं, आपको कुछ तत्वों को जोड़ने की आवश्यकता है, जिन्हें आप अचयनित करना चाहते हैं।

इसके अलावा, आप जावास्क्रिप्ट का उपयोग करके विशिष्ट मामलों में इस वर्ग को जोड़ सकते हैं। यहाँ उदाहरण सीएसएस की मदद से सामग्री को अचयनित करना ।

— 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">

— cristianojeda
स्रोत