web-dev-qa-db-fra.com

Firefox 4 Formulaire de saisie requis Bordure/contour ROUGE

J'ai récemment développé un plugin HTML5 jQuery et je ne parviens pas à supprimer la bordure rouge des champs obligatoires de FF4 beta.

J'ai remarqué que FF applique cette bordure/contour 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'attr d'espace réservé dans les navigateurs plus anciens. Par conséquent, j'ai besoin de toutes les entrées avec cette fonctionnalité pour ne pas afficher la ligne rouge.

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

cssfirefoxjquery-pluginswebforms
49
matmancini

Il existe de nouveaux pseudo-sélecteurs pour certaines des nouvelles fonctionnalités de formulaire HTML5 disponibles en CSS. Vous recherchez probablement :invalid. Vous trouverez ci-dessous tous les documents de MDC Firefox 4 :

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

  • La pseudo-classe :-moz-submit-invalid est Appliquée au bouton de soumission des champs du formulaire Lorsqu'un ou plusieurs champs du formulaire Ne sont pas validés. 

  • La pseudo-classe :required Est désormais automatiquement appliquée Aux champs qui spécifient l'attribut requis; la pseudo-classe :optional est appliquée à tous les autres champs. 

  • La pseudo-classe :-moz-placeholder a été ajoutée afin de vous permettre de styliser le texte fictif dans les champs de formulaire.

  • Le pseudo-sélecteur :-moz-focusring Vous permet de spécifier l'apparence d'un élément Lorsque Gecko estime que l'élément Doit avoir une indication focus centrée

97
jason

Pour être plus précis, vous devez appliquer ce style au contrôle de saisie.

input:invalid {
    box-shadow: none;
}
58
WVDominick

utiliser ce code comme solution simple et rapide

: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

35
Mo.

Enveloppez votre input requise dans un attribut form avec novalidate 

<form novalidate>
    <input required>
</form>
1
Andrew Luca

S'il vous plaît essayez ceci, 

$ ("forme"). attr ("novalidate", vrai);

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

0
Anoop Velluva