Поле ввода светится в Firefox без фокуса

Question

У меня возникла странная проблема, которая влияет только на Firefox. Все поля формы отображаются так, как я их ожидаю (то есть с тонкими границами 1px, которые меняют цвет на основе текущего состояния проверки входного значения), за исключением одного конкретного поля внутри виджета reCAPTCHA, который имеет постоянное красное свечение вокруг пока текст не будет добавлен. Обратите внимание, что это поле ONLY в этой форме, которое имеет этот эффект, и оно не исходит ни из одного из моих стилей - я проверял вычисленные стили, и объяснить это нечем.

Я уже применяюсь outline: 0px none transparent; и -moz-appearance: none; к этим элементам без успеха. Мысли?

SASS:

input, textarea, select { 
    padding: 0.35em 0.5em; 
    width: 100%; 
    max-width: 100%; 
    border: 0.1em solid #C5C5C5; 
    background: #FFFFFF none left center no-repeat; 

    // Add a subtle grey tone to the the text when not focused 
    color: darken(#C5C5C5, 25%); 

    // Nice transitions to smooth out the experience 
    -webkit-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s; 
     -moz-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s; 
      transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s; 
    -moz-appearance: none !important; 
     outline:0px none transparent !important; 

    &:focus { 
     // border-color: #000000; 
     border-left-width: 0.25em; 
     border-color: $info; 
     color: $base-font; 
     background-image: url("../img/info-arrow.png"); 
     outline:0px none transparent !important; 

     &:invalid { 
      border-color: $error; 
      background-image: url("../img/required-arrow.png"); 
     } 
     &:valid { 
      border-color: $success; 
      background-image: url("../img/success-arrow.png"); 
     } 
     &:optional { 
      border-color: $info; 
      background-image: url("../img/info-arrow.png"); 
     } 
    } 

    &[disabled] { 
     background-color: $gray; 
     color: darken($gray, 50%); 
    } 
} 

HTML:

    <div class="field-captcha">      <div id="recaptcha_widget" style="display:none" class="recaptcha_widget"> 
         <div id="recaptcha_image"></div> 
         <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect. Please try again.</div> 

         <div class="recaptcha_input"> 
          <label class="recaptcha_only_if_image" for="recaptcha_response_field">Enter the words above:</label> 
          <label class="recaptcha_only_if_audio" for="recaptcha_response_field">Enter the numbers you hear:</label> 

          <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" required> 
         </div> 

         <ul class="recaptcha_options"> 
          <li class="recaptcha-link"><a href="http://www.google.com/recaptcha" title="reCAPTCHA">Powered by reCAPTCHA</a></li> 
          <li class="new-captcha"> 
           <a href="javascript:Recaptcha.reload()"> 
            <span class="captcha-hide">Get another CAPTCHA</span> 
           </a> 
          </li> 
          <li class="new-captcha audio-captcha recaptcha_only_if_image"> 
           <a href="javascript:Recaptcha.switch_type('audio')"> 
            <span class="captcha-hide">Get an audio CAPTCHA</span> 
           </a> 
          </li> 
          <li class="new-captcha image-captcha recaptcha_only_if_audio"> 
           <a href="javascript:Recaptcha.switch_type('image')"> 
            <span class="captcha-hide"> Get an image CAPTCHA</span> 
           </a> 
          </li> 
          <li class="help"> 
           <a href="javascript:Recaptcha.showhelp()"> 
            <i class="icon-question-sign"></i><span class="captcha-hide"> Help</span> 
           </a> 
          </li> 
         </ul> 
        </div> 

EDIT: Добавлена ​​SASS и соответствующий HTML на вопрос

Answer 1

После Steven Don's отметив, что это был box-shadow эффект, который я попробовал, добавив box-shadow: none всем входами и текстовыми полями, и это изменило стиль Firefox по умолчанию, вызвав этот эффект красного свечения. Для любопытных, здесь были фактические правила, вызывающие эффект (от forms.css):

:-moz-ui-invalid:-moz-focusring:not(output) { 
    box-shadow: 0px 0px 2px 2px rgba(255,0,0,0.4); 
} 
:-moz-ui-invalid:not(output) { 
    box-shadow: 0px 0px 1.5px 1px red; 
} 

Поскольку они из браузера стилей они легко заместить даже основной селектор элемента, который является то, что я вы сделали здесь. В любом случае он устраняет эту проблему с отображением нескольких браузеров.