39 votes

Un moyen de supprimer la bordure noire des IE autour du bouton de soumission dans les formulaires actifs?

Je me suis mise en œuvre d'une conception qui utilise personnalisé soumettre des boutons. Ils sont tout simplement la lumière boutons gris est un peu plus sombre frontière extérieure:

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

Cela ressemble juste à droite de Firefox, Safari et Opera. Le problème, c'est avec Internet Explorer 6 et 7.

Puisque la forme est le premier sur la page, il est considéré comme la principale forme - et donc active de l'aller. Le premier bouton de validation de la forme active reçoit un solide noir frontière, c'est à dire, pour marquer que l'action principale.

Si je désactive les frontières, puis le noir des frontières supplémentaires dans IE va trop loin. Je suis à la recherche d'un moyen de garder mon les frontières, mais supprimer le contour.

31voto

Oli Points 65050

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>
 

28voto

nickmorss Points 508

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.

8voto

David Murdoch Points 28521

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> ).

2voto

rexusdiablos Points 31

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 input = "submit" dans les balises de formulaire. Ne négligez pas ceci. Cela a fonctionné pour moi après avoir tout essayé.

Si vous utilisez un bouton d'envoi, assurez-vous qu'il se trouve dans un formulaire et pas uniquement dans un jeu de champs:

 <form><fieldset><input type="submit"></fieldset></form>
 

2voto

Holf Points 1952

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 équivalent, de sorte qu'elle soit appliquée à toutes les pages de votre site.

Cela fonctionne, mais on se sent un peu mal en quelque sorte.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X