Переопределение reCAPTCHA CSS

Question

Я использую reCAPTCHA, а текстовое поле для recaptcha_challenge_field появляется в середине окна recaptcha, перекрывающего другие вещи. Я обнаружил, что это из-за этого стиля:

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

, когда я установил position к static в Chrome, она выглядит хорошо. Однако я не могу понять, как перезаписать этот параметр CSS.

Я пробовал:

• добавив это мой собственный CSS:

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

• добавив еще одну запись в моем CSS с именем .recaptcha_text
  • назвав его помощью сНу класса (обтекание textarea)
  • , вызывающий его через класс p (обертывание вокруг текстового поля)
  • добавление position: static!important; к стандартному <textarea name="recaptcha_challenge_field" ...> теге

Однако, я не могу получить CSS перезаписать эту позицию: статическую важно; это происходит со сценарием:

<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 (тесттолько кажется, работать в WebKit браузерах)

Это выглядит как простой вопрос CSS специфичностью. CSS-код reCAPTCHA загружается после вашего, и ваш селектор и их имеют равную специфичность (и оба имеют !important в объявлении), и поэтому, поскольку их значение указано последним, оно выигрывает.

Вы можете это исправить, сделав ваш селектор более специфичны, чем их:

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

Я добавил, что в моем демо выше, и я могу видеть, осматривая #recaptcha_response_field элемент, вычисленное значение position свойство действительно действительно static.