Firefox 4 formulaire D'entrée requis bordure/contour rouge
j'ai récemment développé un plugin jQuery HTML5 et j'ai du mal à enlever la bordure rouge sur les champs requis en FF4 beta.
j'ai remarqué que FF applique cette bordure/contour dans les champs requis et la supprime lorsque la valeur est définie. Le problème est que j'utilise l'attribut value pour émuler l'attr du conteneur dans les navigateurs plus anciens. Donc j'ai besoin de toutes les entrées avec cette fonctionnalité de ne pas afficher la ligne rouge.
Vous pouvez voir le problème dans la page démo du plugin ici
5 réponses
il y a de nouveaux pseudo-sélecteurs pour certaines des nouvelles fonctionnalités du formulaire HTML5 disponibles dans CSS. Vous cherchez probablement :invalid
. Les suivants sont tous de la MDC Firefox 4 docs :
-
la pseudo-classe
:invalid
CSS est appliquée automatiquement aux éléments dont le contenu n'est pas validé selon le réglage de type de l'entrée -
le
:-moz-submit-invalid
pseudo-classe est appliqué au bouton Soumettre sur le formulaire champs lorsqu'un ou plusieurs champs de formulaire ne pas valider. -
Le
:required
pseudo-class est maintenant automatiquement appliquée à des domaines spécifiez l'attribut requis; la:optional
pseudo-classe est appliquée à tous les autres champs. -
le
:-moz-placeholder
pseudo-classe A été ajouté pour vous permettre de style texte de remplacement sous forme Fields. -
le pseudo-sélecteur
:-moz-focusring
vous permet de spécifier l'apparence d'une lorsque Gecko croit que élément doit avoir un accent indication rendue.
pour être plus précis, vous devez appliquer ce style au contrôle d'entrée.
input:invalid {
box-shadow: none;
}
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
s'il vous Plaît essayer cette,
$("formulaire").attr ("novalidate", true);
pour votre forme dans votre global .fichier js ou dans la section en-tête.
Envelopper votre input
dans un form
avec novalidate
attribut
<form novalidate>
<input required>
</form>