Un moyen de supprimer la bordure noire des IE autour du bouton de soumission dans les formulaires actifs?
https://stackoverflow.com/questions/126445
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'implémente une conception qui utilise des boutons de soumission personnalisés. Ce sont tout simplement des boutons gris clair avec une bordure extérieure légèrement plus sombre:
input.button {
background: #eee;
border: 1px solid #ccc;
}
Cela s’apparaît parfaitement dans Firefox, Safari et Opera. Le problème concerne Internet Explorer, à la fois 6 et 7.
Étant donné que le formulaire est le premier de la page, il est considéré comme le formulaire principal - et donc actif dès le départ. Le premier bouton de soumission du formulaire actif reçoit une bordure noire unie dans IE pour le marquer comme action principale.
Si je désactive les bordures, la bordure supplémentaire noire dans IE disparaît également. Je cherche un moyen de conserver mes frontières normales, mais de supprimer le contour.
La solution
Cela fonctionne ici:
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
Autres conseils
si vous ne voulez pas ajouter de wrapper à l'entrée / au bouton, essayez ceci. Comme cela est invalide CSS alors faites sre son pour IE uniquement. Avoir la bordure comme pour les autres navigateurs mais utiliser le filtre: chroma for IE ...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
a travaillé pour moi.
Je sais que le jeu est en retard de près de 2 ans, mais j'ai trouvé une autre solution (au moins pour IE7).
Si vous ajoutez un autre input type="submit" à votre formulaire avant tout autre bouton d'envoi du formulaire, le problème disparaîtra. Il ne vous reste plus qu'à masquer ce nouveau bouton absorbant les bordures noires.
Cela fonctionne pour moi (le débordement doit être " auto ")):
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Remarque: j'utilise un type de document HTML5 (<!doctype html>).
J'ai trouvé une réponse qui fonctionne pour moi sur un autre forum. Il supprime la bordure noire indésirable dans ie6 et ie7. Il est probable que certains / beaucoup d’entre vous n’ont pas positionné votre entrée = & "Soumettre &"; dans les balises de formulaire. Ne négligez pas ceci. Cela a fonctionné pour moi après avoir essayé tout d'autre.
Si vous utilisez un bouton d'envoi, assurez-vous qu'il se trouve dans un formulaire et pas seulement dans un jeu de champs:
<form><fieldset><input type="submit"></fieldset></form>
J'ai pu combiner la suggestion de David Murdoch avec un certain JQuery de telle sorte que le correctif soit automatiquement appliqué à tous les éléments 'input: submit' de la page:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
Vous pouvez l'inclure dans une page maître ou dans un document équivalent, de sorte qu'il soit appliqué à toutes les pages de votre site.
Cela fonctionne, mais vous vous sentez un peu mal en quelque sorte.
Je m'appuie sur l'exemple de @ nickmorss consistant à utiliser des filtres qui ne fonctionnaient pas vraiment dans mon cas ... L'utilisation du filtre anti-lueur s'est bien mieux déroulée pour moi.
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
Bien, voici une mauvaise solution à peser ... Collez le bouton dans un <span>, effacez la bordure sur le bouton et attribuez plutôt la bordure à la plage.
IE est un peu incertain sur les marges des éléments de formulaire, cela pourrait donc ne pas fonctionner avec précision. Peut-être qu’il serait peut-être utile de donner à l’envergure le même arrière-plan que le bouton.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
et
<span class="button"><input type="button" name="..." value="Button"/></span>
La meilleure solution que j'ai trouvée consiste à déplacer la bordure vers un élément d'habillage, comme suit:
<div class='submit_button'><input type="submit" class="button"></div>
Avec ce CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
Le problème principal de cette solution est que le bouton est maintenant un élément de bloc et doit avoir une largeur fixe. Nous pourrions utiliser inline-block, sauf que Firefox2 ne le supporte pas.
Toutes les meilleures solutions sont les bienvenues.
je pense filtre: chroma (color = # 000000); comme il a été dit il y a un certain temps, c'est le meilleur que vous puissiez appliquer dans certaines classes. Sinon, vous devrez appliquer une balise supplémentaire sur chaque bouton si vous utilisez des classes, bien sûr.
.buttonStyle { filtre: chroma (color = # 000000); COULEUR DE FOND: # E5813C solide; BORDER-FOTTOM: #cccccc 1px solide; BORDER-LEFT: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solide; COULEUR: # FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, sans serif; TAILLE FONT: 10px; FONT-WEIGHT: gras; TEXT-DECORATION: aucune; } Cela l’a fait pour moi!
J'ai eu ce problème et je l'ai résolu avec un div autour du bouton, je l'ai affiché sous forme de bloc et je l'ai positionné manuellement. les marges des boutons dans IE et FF étaient trop imprévisibles et il n’y avait aucun moyen pour elles d’être heureuses. Mon bouton d'envoi devait être parfaitement aligné avec l'entrée, il ne fonctionnerait donc pas sans le positionnement des éléments en tant que blocs.
Cela va fonctionner:
input[type=button]
{
filter:chroma(color=#000000);
}
Ceci fonctionne même avec la balise button et vous pouvez éventuellement utiliser en toute sécurité la propriété background-image css.
Une solution sophistiquée pourrait consister à utiliser un balisage comme ceci:
<button><span>Go</span></button>
et appliquez vos styles de bordure à l'élément span.
add * border: none cela supprime la bordure pour IE6 et IE7, mais la conserve pour les autres navigateurs
Avec la technique des portes coulissantes, utilisez deux spans éléments à l'intérieur du button. Et éliminez toute mise en forme sur le <=> dans votre substitution IE.
<button><span class="open">Search<span class="close"></span></span></button>
Je ne peux pas (encore) commenter, je dois donc ajouter mon commentaire de cette façon. Je pense que le conseil de M. David Murdoch est le meilleur pour Opera in-active-forms / 3365781 # 3365781 "> ici ). OMG, quelle belle fille il a d'ailleurs.
J'ai essayé son approche dans Opera et j'ai réussi à doubler les balises d'entrée de la manière suivante:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
De cette façon, le premier élément est masqué, mais il capture le focus d’affichage. Opera donnerait alors le deuxième élément d’entrée. J'adore!
Au moins dans IE7, vous pouvez styliser la bordure même si vous ne pouvez pas la supprimer (définissez-la sur none). Donc, définissez la couleur de la bordure sur la même couleur que votre fond devrait faire.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
si votre fond est blanc.
La bonne réponse à cette question est:
outline: none;
... fonctionne pour IE et Chrome, à ma connaissance.
Pour moi, le code ci-dessous a réellement fonctionné.
<!--[if IE]>
<style type="text/css">
input[type=submit],input[type=reset],input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
</style>
<![endif]-->
Vous l'avez obtenu de @Mark's réponse et ne l'a chargé que pour IE.
