2010-08-21 21 views
20

मैं एचटीएमएल 5 में <input> रों लिए कुछ अच्छी डिफ़ॉल्ट स्टाइल के साथ आने के लिए कोशिश कर रहा हूँ और निम्नलिखित की कोशिश की:कौन से तत्व छद्म-तत्वों के बाद :: पहले और :: का समर्थन करते हैं?

input::after   { display: inline; } 
input:valid::after { content: ' ✓ '; color: #ddf0dd; } 
input:invalid::after { content: ' ✗ '; color: #f0dddd; } 

ओह, ::after सामग्री कभी नहीं दिखाई देता है। यह छद्म-तत्वों के लिए डबल-बनाम सिंगल कोलन के साथ कोई समस्या नहीं है; मैंने दोनों की कोशिश की है। यह एक छद्म तत्व और एक छद्म वर्ग के साथ भी कोई समस्या नहीं है; मैंने :valid और :invalid के बिना इसे आजमाया है। मैं क्रोम, सफारी, और Firefox में समान व्यवहार प्राप्त (फ़ायरफ़ॉक्स :valid और :invalid छद्म कक्षाएं नहीं है, लेकिन मैं उन के बिना यह कोशिश की।)

छद्म तत्वों <div>, <span>, <p> पर ठीक से काम , और <q> तत्व - जिनमें से कुछ ब्लॉक तत्व हैं और कुछ इनलाइन हैं।

तो, मेरा सवाल है: ब्राउज़र क्यों सहमत हैं कि <input> के पास ::after नहीं है? मुझे उस नमूने में कुछ भी नहीं मिला जो यह इंगित करेगा।

+1

रिकॉर्ड के लिए, डबल कोलन और एकल कोलन छद्म तत्वों और ** छद्म कक्षाएं **, क्योंकि लोगों को कहा जाता है एक छाता शब्द में एक साथ उन दोनों munging रहे थे "छद्म चयनकर्ताओं को अलग करने के लिए ही थे "। – BoltClock

उत्तर

28

जैसा कि आप यहां http://www.w3.org/TR/CSS21/generate.html पढ़ सकते हैं,: केवल उन तत्वों पर काम करता है जिनमें एक (दस्तावेज़ पेड़) सामग्री है। <input> में कोई सामग्री नहीं है, साथ ही साथ <img> या <br> है।

+1

आपके पास दुखद सच्चाई है। :(अगर ',' ', और कुछ अन्य तत्व समर्थित थे, तो कुछ सुंदर मीठी चीजें पूरी की जा सकती हैं, और कुछ अन्य तत्व समर्थित थे। जैसे कि alt विशेषता के साथ छवि टूलटिप्स, और ऐसे। धन्यवाद! –

+0

@Web_Designer सहमत हुए, मैंने बस कुछ एक साथ रखा ' 'के साथ और बाद में चयनकर्ता जहां यह इनपुट दृश्यता को छुपाता है लेकिन इनपुट के साथ एक स्टार दिखाता है: चयनकर्ता –

5

वेबकिट आपको इनपुट तत्वों के बाद :: करने देता है। यदि आप इसे फ़ायरफ़ॉक्स में काम करने का कोई तरीका चाहते हैं तो आप इनपुट के बजाय इनपुट के लेबल पर :: का उपयोग करने का प्रयास कर सकते हैं।

+2

के बाद यह सुनिश्चित नहीं है कि यह वापस आ गया है, लेकिन' इनपुट 'तत्वों पर' :: बाद 'तत्व काम नहीं करते हैं क्रोम 21 या सफारी 5.1.7 (विंडोज़) में। http://jsfiddle.net/V8cvQ/13/ – MrWhite

5

आप तत्व से पहले या उसके बाद एक अवधि डाल सकते हैं। उदाहरण के लिए:

<style> 
#firstName:invalid+span:before { 
    content: "** Not OK **"; 
    color: red; 
} 
</style> 

<input type="text" name="firstName" id="firstName" placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John)" 
    /><span>&nbsp;</span> 
संबंधित मुद्दे