Переопределение reCAPTCHA CSS - PullRequest
Новая
       4

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

5 голосов
/ 01 февраля 2012

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

.recaptchatable #recaptcha_response_field {
    position: absolute!important;

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

Я попытался:

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

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

Однако я не могу заставить свой CSS перезаписать эту позицию: static! Важный;который приходит со сценарием: 

<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>

Может кто-нибудь помочь с тем, что я делаю неправильно?Спасибо!

1 Ответ

2 голосов
/ 01 февраля 2012

Из тестирования здесь: 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.

...