Firefox 4 Formulaire de saisie obligatoire Bordure/outline rouge

Question

J'ai récemment développé un plugin HTML5 jQuery et j'ai du mal à supprimer la bordure rouge des champs obligatoires dans la version bêta de FF4.

J'ai remarqué que FF applique cette bordure/outline dans les champs obligatoires et la supprime lorsque la valeur est définie. Le problème est que j'utilise l'attribut value pour émuler l'attribut placeholder dans les anciens navigateurs. Par conséquent, j'ai besoin que toutes les entrées avec cette fonctionnalité n'affichent pas la ligne rouge.

Vous pouvez voir le problème dans la page de démonstration de l'application plugin ici

Answer 1

De nouveaux pseudo-sélecteurs pour certaines des nouvelles fonctionnalités des formulaires HTML5 sont disponibles en CSS. Vous recherchez probablement :invalid . Les éléments suivants sont tous issus du Docs MDC Firefox 4 :

• Le site :invalid La pseudo-classe CSS est appliquée automatiquement aux éléments dont le contenu ne peut être validé en fonction du paramètre de type de l'entrée.

• Le site :-moz-submit-invalid La pseudo-classe est appliquée au bouton d'envoi du formulaire lorsqu'un ou plusieurs champs du formulaire ne sont pas validés.

• Le site :required La pseudo-classe est maintenant automatiquement appliquée aux champs qui spécifient l'attribut requis ; le :optional pseudo-classe est appliquée à tous les autres champs.

• Le site :-moz-placeholder pseudo-classe a été a été ajoutée, pour vous permettre de styliser le texte de remplacement dans les champs de formulaire.

• Le site :-moz-focusring pseudo-sélecteur vous permet de spécifier l'apparence d'un lorsque Gecko estime que l'élément élément devrait avoir une indication rendu.

Answer 2

Pour être plus précis, vous devez appliquer ce style au contrôle d'entrée.

input:invalid {
    box-shadow: none;
}

Answer 3

Utiliser ce code comme solution rapide et simple

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

Référence : - https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

Answer 4

Essayez ceci, s'il vous plaît,

$("form").attr("novalidate",true) ;

pour votre formulaire dans votre fichier .js global ou dans la section en-tête.

Answer 5

Enveloppez vos besoins input en un form avec novalidate attribut

<form novalidate>
    <input required>
</form>