web-dev-qa-db-fra.com

Est-il possible de supprimer la bordure noire d'IE autour du bouton de soumission dans les formulaires actifs?

J'implémente une conception qui utilise des boutons d'envoi personnalisés. Ce sont tout simplement des boutons gris clair avec une bordure extérieure légèrement plus foncée:

input.button {
    background: #eee;
    border: 1px solid #ccc;
}

Cela semble parfait dans Firefox, Safari et Opera. Le problème est avec Internet Explorer, 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 d'envoi du formulaire actif reçoit une bordure noire pleine dans IE, pour le marquer comme action principale.

Si je désactive les bordures, la bordure noire supplémentaire dans IE disparaît également. Je cherche un moyen de conserver mes bordures normales, mais supprimez le contour.

cssinternet-explorer
39
Magnar

Eh bien, 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>
31
Oli

si vous ne souhaitez pas ajouter un wrapper à l'entrée/bouton, essayez de le faire. Comme ceci n'est pas valide CSS, faites-le sre pour IE uniquement. Ayez la bordure comme pour les autres navigateurs mais utilisez le filtre: chroma pour IE ...

<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->

travaillé pour moi.

28
nickmorss

Je sais que j'ai presque 2 ans de retard dans le jeu, 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 doctype HTML5 (<!doctype html>).

8
David Murdoch

J'ai pu combiner la suggestion de David Murdoch avec certains JQuery de telle sorte que le correctif sera automatiquement appliqué pour tous les éléments 'input: submit' sur 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 l'équivalent, afin qu'elle soit appliquée à toutes les pages de votre site.

Cela fonctionne, mais cela semble un peu faux, d'une manière ou d'une autre.

2
Holf

Je m'inspire de l'exemple de @ nickmorss en utilisant des filtres qui n'ont pas vraiment fonctionné pour ma situation ... À la place, le filtre lumineux a fonctionné beaucoup mieux 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]-->
2
Drew Chapin

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/plusieurs d'entre vous n'ont pas positionné votre entrée = "soumettre" dans les balises de formulaire. Ne négligez pas cela. Cela a fonctionné pour moi après avoir essayé tout autrement.

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>
2
rexusdiablos

Eh bien, voici une solution laide pour vous de peser ... Collez le bouton dans un <span>, nuke la bordure sur le bouton et donnez la bordure à la place à la place.

IE est un peu incertain sur les marges des éléments de formulaire, donc cela pourrait ne pas fonctionner précisément. Peut-être que donner à la portée le même arrière-plan que le bouton pourrait aider à cet égard.

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>
1
Oli

La meilleure solution que j'ai trouvée est de déplacer la bordure vers un élément d'habillage, comme ceci:

<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 principal problème avec cette solution est que le bouton est maintenant un élément de bloc et doit être de largeur fixe. Nous pourrions utiliser le bloc en ligne, sauf que Firefox2 ne le prend pas en charge.

Toutes les meilleures solutions sont les bienvenues.

1
Magnar

Cela va fonctionner:

input[type=button]
{
       filter:chroma(color=#000000);
}

Cela fonctionne même avec la balise button, et vous pouvez éventuellement utiliser en toute sécurité la background-image propriété css.

1
Luca Fagioli

Je pense que le filtre: chroma (couleur = # 000000); comme mentionné il y a un moment, c'est le meilleur que vous puissiez appliquer dans certaines classes. Sinon, vous devrez aller appliquer une balise supplémentaire sur chaque bouton que vous avez, c'est-à-dire si vous utilisez des cours bien sûr.

.buttonStyle {filtre: chroma (couleur = # 000000); COULEUR DE FOND: # E5813C solide; BORDER-BOTTOM: #cccccc 1px solide; BORDER-LEFT: #cccccc 1px solid; BORDURE-DROITE: #cccccc 1px solide; BORDER-TOP: #cccccc 1px solide; COULEUR: # FF9900; FAMILLE DE POLICES: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; POIDS AVANT: gras; TEXTE-DECORATION: aucun; } Cela a fait pour moi!

1
Kostas

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 pour les boutons dans IE et FF était tout simplement trop imprévisible et il n'y avait aucun moyen pour eux deux d'être heureux. Mon bouton de soumission devait être parfaitement aligné contre l'entrée, donc il ne voulait tout simplement pas travailler sans positionner les éléments comme des blocs.

1
ang

La bonne réponse à cette question est:

outline: none;

... fonctionne pour IE et Chrome, à ma connaissance.

0
curly_brackets

Je ne peux pas (encore) commenter, je dois donc ajouter mon commentaire de cette façon. Je pense que les conseils de M. David Murdoch sont les meilleurs pour Opera ( ici ). OMG, quelle jolie fille il a entre-temps.

J'ai essayé son approche en Opera et j'ai réussi à doubler les balises d'entrée de cette manière:

<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />

De cette façon, le 1er élément est masqué, mais il attrape le focus d'affichage Opera donnerait à la place au 2ème élément d'entrée. AIMEZ-LE!

0
Tyler

Une solution hackée pourrait être d'utiliser un balisage comme celui-ci:

<button><span>Go</span></button>

et appliquez vos styles de bordure à l'élément span.

0
Lasar

add * border: aucun cela supprime la bordure pour IE6 et IE7, mais la conserve pour les autres navigateurs

0
Michael Torfs

Au moins dans IE7, vous pouvez styliser la bordure althogh vous ne pouvez pas la supprimer (ne la définir sur aucune). Définissez donc la couleur de la bordure sur la même couleur que celle de votre arrière-plan.

.submitbutton { 
background-color: #fff;
border: #fff dotted 1px; 
}

si votre fond est blanc.

0
Gregor

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]-->

Je l'ai eu de @Mark'sréponse et l'a chargé uniquement pour IE.

0
Shubh

Avec la technique des portes coulissantes, utilisez deux spans à l'intérieur du button. Et éliminez toute mise en forme sur le button dans votre IE override.

<button><span class="open">Search<span class="close"></span></span></button>
0
Benxamin