Firefox 4: Y a-t-il un moyen de supprimer la bordure rouge dans une entrée de formulaire requise?


52

Lorsque requis est défini dans un champ de formulaire, Firefox 4 affiche automatiquement une bordure rouge à cet élément, même AVANT que l'utilisateur frappe le bouton soumettre. Je pense que c'est dérangeant pour l'utilisateur car il/elle n'a pas fait d'erreurs au début.

Je souhaite masquer cette bordure rouge pour l'état initial, mais l'afficher lorsque l'utilisateur appuie sur le bouton d'envoi s'il y a un champ manquant marqué comme requis.

J'ai regardé :required et :invalid du nouveau sélecteur de pseudo, mais les changements sont pour avant et après la validation. (à partir de Firefox 4 Required input form RED border/outline)

Existe-t-il un moyen de désactiver la bordure rouge avant que l'utilisateur ne soumette le formulaire et de l'indiquer s'il existe des champs manquants?

+1

Que diriez-vous de contour: 0; ? 19 mai. 142014-05-19 14:20:12

104

C'était un peu difficile, mais je l'ai mis en place cette exmaple: http://jsfiddle.net/c5aTe/ qui travaille pour moi. Fondamentalement, l'astuce semble être de contourner le texte d'espace réservé qui est invalide. Sinon, vous devriez être en mesure le faire:

input:required { 
    box-shadow:none; 
} 
input:invalid { 
    box-shadow:0 0 3px red; 
} 

ou quelque chose de similaire ...

MAIS depuis FF4 décide de valider votre texte d'espace réservé (pas idée pourquoi ...) la solution dans le violon (petit hacky - utilise !important) est requis.

Espérons que ça aide!

EDIT

Doh !! - Je me sens bien bête. J'ai mis à jour mon violon: http://jsfiddle.net/c5aTe/2/ - vous pouvez utiliser la classe pseudo :focus pour garder l'élément stylé comme si valide pendant que l'utilisateur tape. Ce sera toujours mettre en évidence en rouge si le contenu est invalide lorsque l'élément perd le focus, mais je pense qu'il ya seulement tellement que vous pouvez faire avec le comportement conçu ...

HTH :)


EDIT après acceptation:

Résumé des exemples à la demande OP (note les deux premiers sont uniquement conçus pour FF4 - pas Chrome)

  1. Fix pour FF valider votre place texte titulaire: http://jsfiddle.net/c5aTe/
  2. Fix pour FF valider que vous tapez: http://jsfiddle.net/c5aTe/2
  3. solution JS styles basculer/validation: http://jsfiddle.net/c5aTe/4
  0

Grande percée, mais l'erreur "invalide" semble être affichée lorsque l'utilisateur clique sur l'entrée => lorsque l'entrée est vide, AVANT d'écrire réellement quelque chose. Mais peut-être que ce que je veux est un bug dans FF4 qui ne peut pas être résolu:/ 31 mai. 112011-05-31 15:51:57

  0

Mais +1 pour votre façon de limiter l'horrible ombre de la boîte rouge :) 31 mai. 112011-05-31 15:52:52

  0

Ne pensez pas que vous pouvez le faire parce que, étrangement, c'est presque * aussi * intelligent et valide à la volée. Vous pourriez être intelligent avec un javascript supplémentaire qui a ajouté ou supprimé une classe du formulaire quand il est soumis. Vous pouvez ensuite remplacer toute surlignement de validation en fonction de la présence ou non de cette classe. Une bonne chose à ce sujet est qu'il utilise encore la validation native pas si belle nécessite js supplémentaire ...: | 31 mai. 112011-05-31 16:00:36

+1

avait une certaine inspiration tout en faisant le petit déjeuner - ajouté ci-dessus! 01 juin. 112011-06-01 06:38:57

  0

Clever! : p Mais si vous jetez un coup d'oeil, vous avez l'ombre pour l'état original ET l'ombre de la boîte pour l'état invalide. Les deux sont montrés. Je commence à croire que c'est une erreur de Mozilla, ils n'ont pas pensé à l'état initial. Si cela est correct et que personne d'autre n'a ajouté un moyen de le faire complètement, je n'accepterai pas votre réponse mais je vous donnerai la prime (j'espère que c'est possible, sinon j'accepterai votre réponse). Vous le méritez :) Merci pour votre aide! 01 juin. 112011-06-01 07:29:22

  0

merci pour le commentaire :). Juste pour vérifier - vous regardez le deuxième violon? Je reçois seulement 1 ombre après tabulation quand le contenu invalide est entré - pas en tapant et pas avant non plus. Impossible de voir une ombre par défaut - elle devrait être supprimée par la déclaration CSS initiale. Je suis maintenant curieux de savoir pourquoi nous voyons des résultats différents ... En outre, je me suis moqué d'une solution javascript potentiel (avec des fonctions inline sales) avec deux exemples: http://jsfiddle.net/c5aTe/4/ 01 juin. 112011-06-01 10:20:32

  0

Eh bien, je savoir ce que le second jsfiddle ne fonctionnait pas pour moi ... Je le testais sur Chrome (honte à moi). Mais cela révèle un autre problème (pour une autre question alors): pourquoi le problème est maintenant sur Chrome: p Eh bien, vous méritiez la prime et la réponse acceptée, car cela fonctionne maintenant pour FF! Pourriez-vous mettre à jour votre réponse avec le second jsfiddle et le dernier que vous avez suggéré, les deux fonctionnent bien (un en FF seulement, le second, en utilisant JS, dans les deux). Cela pourrait aider d'autres utilisateurs ayant le même problème. Merci encore :) 01 juin. 112011-06-01 10:29:29

  0

(Je ne peux attribuer la prime en 56 minutes ... vous devrez attendre;)) 01 juin. 112011-06-01 10:30:00

  0

Woot - ajouté à ma réponse comme vous l'avez suggéré. :) 01 juin. 112011-06-01 10:54:11

  0

Merci! 31 minutes restantes ...: p 01 juin. 112011-06-01 10:55:22

  0

Je devais juste faire ceci: select [requis] { box-shadow: none! important; } 04 janv.. 132013-01-04 20:06:04


0

Cela a bien fonctionné pour moi:

input:invalid { 
    -moz-box-shadow: none; 
} 
+4

Le problème ici est qu'après la validation, l'ombre de la boîte reste à zéro et l'utilisateur n'a aucune idée de l'endroit où les erreurs se produisent. Ce que je veux, c'est NE PAS afficher la bordure rouge dans l'état normal du formulaire, mais le montrer quand l'utilisateur soumet/brouille le formulaire s'il y a une erreur. 31 mai. 112011-05-31 11:33:24


2

Voici une solution très simple qui a fonctionné pour moi.J'ai fondamentalement changé le rouge laid dans un bleu très agréable, ce qui est la couleur standard pour les champs non-requis, et une convention Web:

:required { 
    border-color: rgba(82, 168, 236, 0.8); 
} 

24

À partir de Firefox 26, le CSS réel utilisé pour identifier les champs obligatoires non valide comme suit (vient de forms.css):

:not(output):-moz-ui-invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

Pour répliquer dans d'autres navigateurs, j'utilise:

input:invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

J'ai joué avec les réglages de pixels, mais je ne aurais jamais deviné le 1. 5px sans regarder moz source. attr ("NOVALIDATE", true)

input:invalid { 
    box-shadow: none; 
} 

0

S'il vous plaît essayer ceci,

$ ("form");:

Pour le désactiver, vous pouvez utiliser.

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