रेकैप्चा सीएसएस

Question

ओवरराइडिंग मैं reCAPTCHA का उपयोग कर रहा हूं, और recaptcha_challenge_field के लिए टेक्स्टरेरा अन्य चीजों को ओवरलैप करने वाले रिकैप्चा बॉक्स के बीच में दिखाई दे रहा है। मैंने पाया है कि यह क्योंकि इस शैली की है:

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

जब मैं क्रोम में static करने के लिए position निर्धारित करते हैं, यह ठीक लग रहा है। हालांकि, मैं यह नहीं समझ सकता कि उस सीएसएस विकल्प को ओवरराइट कैसे करें।

मैंने कोशिश की:

• मेरे अपने सीएसएस करने के लिए इस जोड़ने:

  .recaptchatable #recaptcha_response_field { 
      position: static !important; 
  } 
  

• नाम .recaptcha_text
  • div class के माध्यम से इसे बुला के साथ मेरी सीएसएस में कोई अन्य प्रविष्टि जोड़ने (चारों ओर लपेटकर textarea)
  • इसे पी क्लास के माध्यम से कॉल करना (टेक्स्टरेरा के चारों ओर लपेटना)
  • मानक <textarea name="recaptcha_challenge_field" ...> टैग करने के लिए position: static!important; जोड़ने

हालांकि, मैं अपने सीएसएस उस स्थिति अधिलेखित करने के लिए नहीं मिल सकता है: स्थिर महत्वपूर्ण; जो स्क्रिप्ट के साथ आता है:

<script type="text/javascript" 
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"> 
</script> 
<noscript> 
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" 
    height="300" width="500" frameborder="0"></iframe><br> 
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> 
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> 
</noscript> 

क्या कोई मेरी मदद कर सकता है जो मैं गलत कर रहा हूं? धन्यवाद!

Answer 1

परीक्षण यहाँ से: http://jsbin.com/otihuk/edit#html,live

यह एक सरल सीएसएस विशिष्टता मुद्दे की तरह दिखता है (परीक्षण केवल वेबकिट ब्राउज़रों में काम करने के लिए लगता है)। ReCAPTCHA सीएसएस आपके बाद लोड हो गया है, और आपके चयनकर्ता और उनके दोनों के बराबर विशिष्टता है (और घोषणा में !important दोनों हैं), और इसलिए क्योंकि उनका अंतिम बार निर्दिष्ट है, यह जीतता है।

आप उनकी तुलना में अपने चयनकर्ता अधिक विशिष्ट बनाने के द्वारा इसे ठीक कर सकते हैं:

#recaptcha_area #recaptcha_response_field { 
    position: static !important; 
} 

मैं जोड़ दिया है कि इसके बाद के संस्करण मेरी डेमो में, और मुझे लगता है कि position की परिकलित मान #recaptcha_response_field तत्व का निरीक्षण से देख सकते हैं संपत्ति अब वास्तव में static है।