क्या मैं सीएसएस का उपयोग कर एक HTML चयन को "नियमित पाठ" में बदल सकता हूं?

एचटीएमएल 5 <select> टैग का उपयोग कर मेरे पास एक वेब पेज पर एक ड्रॉप डाउन बॉक्स है। ऐसे समय होते हैं जहां मैं इसे "केवल पढ़ने" बनाना चाहता हूं, जो इसे केवल पाठ के रूप में प्रदर्शित करता है।क्या मैं सीएसएस का उपयोग कर एक HTML चयन को "नियमित पाठ" में बदल सकता हूं?

कभी कभी मैं यह "पढ़ने/लिखने" होना चाहता हूँ:

Read/write

और दूसरी बार मैं इसे "केवल पढ़ने" होना चाहता हूँ:

enter image description here

उदाहरण के लिए मैं "अक्षम" विशेषता का उपयोग न करना पसंद करूंगा। मुझे लगता है कि यह चिकना दिखता है, और इसका तात्पर्य है कि उपयोगकर्ता के लिए कोई विकल्प नहीं है जब कोई भी उपलब्ध न हो।

क्या सीएस का उपयोग कर select सामान्य पाठ में वर्तमान विकल्प के रूप को बदलना संभव है?

स्रोत

2013-03-28 Dylan Klomparens

+1 दिलचस्प सवाल। मैं वास्तव में देखना चाहता हूं कि बोल्टक्लॉक जैसे सीएसएस विज़ार्डों को इस बारे में क्या कहना होगा। –

मैं कहूंगा कि स्टाइलिंग चयन – Huangism

से शुरू होने के लिए अलग-अलग ब्राउज़रों में अस्थिर है, एक अक्षम चयन तत्व कैसे इंगित करेगा कि यह स्पष्ट रूप से अक्षम होने पर एक विकल्प है और इसके साथ बातचीत नहीं की जा सकती है? 'अक्षम' विशेषता उपयोगकर्ता को तत्व के साथ बातचीत करने से रोकने से अधिक करती है, यह तत्व को शेष रूप से सबमिट करने से रोकती है। – cimmanon

हाँ, सीएसएस का उपयोग करें:

select { 
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: none; 
    /* needed for Firefox: */ 
    overflow:hidden; 
    width: 120%; 
}

उदाहरण:

http://jsfiddle.net/eG3dS/

"की जरूरत Firefox के लिए" खंड की वजह से

, आप एक div या काल करने की आवश्यकता होगी कि चयन बॉक्स आकार को बाधित करता है। यह बहुत खराब है एफएफ moz-appearance का सम्मान नहीं करता है।

ध्यान दें कि भले ही यह सामान्य पाठ की तरह दिखता है, फिर भी यह एक कामकाजी चयन बॉक्स है!आपको "अक्षम" विशेषता का उपयोग करके और फ़ॉन्ट रंग या अन्यथा बदलकर इसे किसी भी तरह से अक्षम करने की आवश्यकता होगी।

स्रोत

2013-03-28 19:54:27

'पॉइंटर-इवेंट्स: कोई नहीं' - यह टेक्स्ट को चुनने से रोक देगा। – ThiefMaster

पवित्र बकवास, मुझे आश्चर्य है कि यह आईई में काम करता है। – Graham

@ थिफमास्टर जो टैबबिंग द्वारा बदलावों को रोकता नहीं है! –

मुझे लगता है कि सबसे आसान चीज़ आपके चयन के बगल में एक अवधि होगी, और अपने पाठ को अवधि में कॉपी करने के लिए चयन पर एक ईवेंट श्रोता का उपयोग करें, और टॉगल करें कि चयन या अवधि दिखाई दे रही है या नहीं। यह जावास्क्रिप्ट का थोड़ा सा है लेकिन यह आपको बहुत अधिक नियंत्रण देगा।

स्रोत

2013-03-28 19:36:44 atw13

फिर आपका उत्तर "नहीं, सीएसएस के साथ यह संभव नहीं है"? –

वास्तविक समस्या को हल करने के लिए अंतर्निहित समस्या को हल करने का यह सबसे व्यावहारिक तरीका है। – Graham

-1

आप कस्टम ड्रॉप डाउन बना सकते हैं और एक अक्षम राज्य हो सकते हैं, जो सीएसएस के साथ स्टाइल किया गया हो।

वहाँ एक बहुत अच्छी jQuery प्लगइन है कि आप के साथ इस सेट अप कर सकते है: http://uniformjs.com/

स्रोत

2013-03-28 19:36:57 Chris

http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question। साथ ही, यह एक जावास्क्रिप्ट प्रश्न भी नहीं है, यह एक सीएसएस प्रश्न है। –

हम सभी जानते हैं कि आप सीएसएस के साथ चयन नहीं कर सकते हैं। यह एक मान्य, वैकल्पिक समाधान है। – Chris

यदि आपको लगता है कि आप चयन के साथ तत्व को स्टाइल नहीं कर सकते हैं और इसके लिए अच्छा उद्धरण है, तो _that_ आपके उत्तर के साथ होना चाहिए कि आप इसे जावास्क्रिप्ट के साथ एक टिप्पणी के रूप में कैसे करेंगे। सवाल यह है कि "क्या सीएसएस का उपयोग कर सामान्य पाठ में चयन के लिए वर्तमान विकल्प के रूप को बदलना संभव है?", आपका उत्तर इस सवाल का जवाब नहीं देता है। इसके अलावा, यह आम शिष्टाचार के खिलाफ चला जाता है जिसे मेटा में तय किया गया था और मतदान किया गया था। मुझे पता है कि आप बस मदद करने की कोशिश कर रहे हैं और कठोर ध्वनि के लिए मैं क्षमा चाहता हूं। –

वेबकिट आप यह कर सकते हैं का उपयोग कर -webkit-appearance: none;

select { 
    -webkit-appearance: none; 
    border: none; 
}

डेमो: http://jsfiddle.net/ThiefMaster/56Eu2/2/

उपयोगकर्ता को रोकने के लिए वास्तव में चयन बॉक्स का उपयोग करके आपको इसे अक्षम करने की आवश्यकता है (disabled विशेषता)।

चेतावनी दीजिये कि यह बेहद गैर-मानक है और उदाहरण के लिए -moz-appearance के साथ काम नहीं करता है! -*-appearance संपत्ति के Thebehavior विभिन्न ब्राउज़रों और मोज़िला भी recommends not using it on websites at all में अंतर होता है:

वेब साइटों पर इस संपत्ति का उपयोग न करें: न केवल यह गैर मानक है, लेकिन एक से दूसरे ब्राउज़र से अपने व्यवहार में बदलाव है। यहां तक कि कीवर्ड भी अलग-अलग ब्राउज़रों पर प्रत्येक फॉर्म तत्व पर समान व्यवहार नहीं करता है, और कुछ इसका समर्थन नहीं करते हैं।

स्रोत

2013-03-28 19:42:50 ThiefMaster

क्या मैं सीएसएस का उपयोग कर एक HTML चयन को "नियमित पाठ" में बदल सकता हूं?

उत्तर

संबंधित मुद्दे