2012-02-08 9 views
10

यदि मेरे पास ऑप्टन की एक सूची है, तो मैं <option> को प्रभावित करने के लिए {content: ''} से पहले सीएसएस छद्म-तत्व का उपयोग कैसे कर सकता हूं? नीचे तीन विकल्प हैं जिन्हें मैं प्रत्येक से पहले टेक्स्ट सम्मिलित करना चाहता हूं।मैं <option> तत्व को प्रभावित करने के लिए {content: ''} से पहले सीएसएस छद्म-तत्व का उपयोग कैसे कर सकता हूं?

मुझे पता है कि यह बुद्धि जावास्क्रिप्ट/jQuery किया जा सकता है, लेकिन क्या यह सीएसएस के साथ संभव है?

<html> 
<head> 
    <style> 

     option::before { 
      content: "sandy - " 
     } 

    </style> 


</head> 
<body> 

<select> 
    <option>beach</option> 
    <option>field</option> 
    <option>carpet</option> 
</select> 


</body> 
</html> 
+0

जैसा कि उनके जवाब में j08691 द्वारा उल्लिखित है, 'पहले' CSS3 के लिए नया नहीं है। इसे "छद्म-तत्व" भी कहा जाता है - मूल प्रश्न में "छद्म" टैग शायद वहां है क्योंकि आपको [छद्म चयनकर्ता] नहीं मिल सका - ऐसा इसलिए है क्योंकि वह टैग जला दिया गया है। – BoltClock

उत्तर

16

::before और ::after छद्म तत्व वास्तव में तत्व के लिए एक बच्चे नोड को पूर्ववत/संलग्न करते हैं, इसलिए यह किसी भी तत्व पर काम नहीं करेगा जिसमें बाल नोड्स नहीं हो सकते हैं।

यह होगा (मोटे तौर पर) कर के बराबर:

<option><span>sandy - </span>beach</option> 

आप पाठ मान को अपडेट करना चाहते हैं, तो आप जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

+2

छद्म तत्व * * खाली तत्वों को भी प्रभावित कर सकते हैं (खाली सामग्री से पहले या बाद में सामग्री डालना), और 'विकल्प' तत्व भी खाली नहीं हैं। –

7

ऐसा प्रतीत होता है कि अब आप नहीं कर सकते हैं। W3 के मुताबिक, "यह विनिर्देश पूरी तरह से बातचीत की परिभाषा को परिभाषित नहीं करता है: पहले और बाद में प्रतिस्थापित तत्वों (जैसे HTML में IMG) के साथ"। कुछ प्रतिस्थापित तत्वों <img> टैग, प्लगइन्स (< वस्तु > टैग), और फार्म तत्वों (< बटन >, < पाठ क्षेत्र >, < इनपुट >, और < > टैग चुनें) कर रहे हैं।

हालांकि आप जावास्क्रिप्ट के साथ ऐसा कर सकते हैं। ओह और बीटीडब्ल्यू, सामग्री :,: पहले, और: वास्तव में सीएसएस 2.1 के बाद हैं।

+3

': पहले 'CSS3 के लिए नया नहीं है - हालांकि, डबल-कॉलन नोटेशन' :: पहले' है। फेल में यह है कि हमें IE8 उपयोगकर्ताओं को सचेत रखने के लिए सिंगल-कॉलन नोटेशन का उपयोग करना जारी रखना चाहिए, लेकिन मैं digress। – BoltClock

+1

यह भी ध्यान दिया जाना चाहिए कि 'पहले से' और ': बाद के छद्म तत्व * * के साथ सामग्री पीढ़ी *