Box Schatten und andere Farbeffekte funktionieren nicht auf Mozilla Firefox

Question

Ich habe eine Pop-up-Anmeldeformular mit Bootstrap modal Klasse erstellt. Und ich habe eine jQuery-Validierungs-Engine verwendet, um das Formular zu validieren. Und dort habe ich einen Box-Schatten hinzugefügt und die Hintergrundfarbe und -farbe geändert. Dies funktioniert gut in Chrome und Internet Explorer, aber es funktioniert nicht in Firefox.

Hier ist meine Form

<div class="modal fade" id="signupForm" data-backdrop="false" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content Popmodal"> 
      <div class="modal-header"> 
       <button type="button" class="close Popclose" data-dismiss="modal" aria-label=""> 
        <span>&times;</span> 
       </button> 
       <h4 class="modal-title Poptit">Sign Up</h4> 
      </div> 

      <div class="modal-body Popbody"> 
       <form class="form-horizontal" method="post" action="registration.php" id="reg-form"> 
        <div class="form-group"><br> 
         <label class="col-md-4 col-md-offset-1">User Name :</label> 
         <div class="col-md-5"> 
          <input type="text" placeholder="A name that you like to use" class="form-control input-sm popname validate[required]" name="uname" id="uname" data-errormessage-value-missing="Username is required !" data-prompt-position="bottomLeft:5,4"><br> 

         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Email :</label> 
         <div class="col-md-5"> 
          <input type="email" placeholder="Your email address" class="form-control input-sm popname validate[required,custom[email]]" name="mail" id="mail" data-errormessage-value-missing="Email is required !" data-errormessage-custom-error="Invalid email address !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 

        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Password :</label> 
         <div class="col-md-5"> 
          <input type="password" maxlength="15" placeholder="Password" class="form-control input-sm popname validate[required]" name="pass" id="pass" data-errormessage-value-missing="Password is required !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Confirm Password :</label> 
         <div class="col-md-5"> 
          <input type="password" maxlength="15" placeholder="Confirm password" class="form-control input-sm popname validate[required,equals[pass]]" name="cpass" id="cpass" data-errormessage-value-missing="Confirm password is required !" data-errormessage-pattern-mismatch="Password fields do not match !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-2 col-md-offset-8"> 
          <button type="submit" class="btn btn-success sign" value="submit" name="signup">Sign Up</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Hier ist die CSS

.formError .formErrorContent { 
    width: 100%; 
    background: #222; 
    position:relative; 
    color:#EE330E; 
    min-width: 120px; 
    font-size: 11px; 
    border: 1px solid #EE330E; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    padding: 4px 10px 4px 10px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -o-border-radius: 6px;  
} 

jQuery-Validation-Engine - link

Answer 1

Sie wurden die nicht-Anbieter-Präfix für die Box Schatten fehlt.

Ich würde empfehlen, Hersteller Präfixe für beide Box Schatten und Grenze Radius zu entfernen, da sie nicht mehr ein experimentelles Feature sind.

See: http://shouldiprefix.com/#box-shadow

Jedoch habe ich Ihren Code mit der fehlenden Zeile aktualisiert:

#signupForm .formError .formErrorContent { 
    width: 100%; 
    background: #222; 
    position:relative; 
    color:#EE330E; 
    min-width: 120px; 
    font-size: 11px; 
    border: 1px solid #EE330E; 
    outline: 0; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    padding: 4px 10px 4px 10px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -o-border-radius: 6px;  
} 

bearbeiten -----

Gerade falls die Validierung nicht funktioniert in Firefox ... stellen Sie sicher, dass das Validierungs-Plugin die Bindung an das Element anwendet, nachdem das Modal ausgelöst wurde, zum Beispiel:

$('#signupForm').on('shown.bs.modal', function() { 
    $("#reg-form").validationEngine(); 
}