Supprimer la bordure des boutons


109

J'ai essayé de créer des boutons et d'insérer mes propres images au lieu des images de bouton standard. Cependant, la bordure grise des boutons standard reste toujours, montrant à l'extérieur de mes images de bouton noir.

Est-ce que quelqu'un sait comment supprimer cette bordure grise du bouton, donc c'est juste l'image elle-même? Je vous remercie.


Essayez -webkit-appearance: inherit;ou-webkit-appearance:initial
Max

1
@Brut: Je me trompe peut-être, mais cela me semble spécifique au navigateur, et je suis presque sûr que Jameson veut quelque chose qui fonctionnera pour tous les navigateurs modernes.
Michael Scheper

Réponses:


185

Ajouter

padding: 0;
border: none;
background: none;

à vos boutons.

Démo:

https://jsfiddle.net/Vestride/dkr9b/


J'apprécie ... mais j'ai ajouté comme vous l'avez dit à la feuille de style et cela n'a malheureusement pas fonctionné. Dois-je simplement l'intégrer directement dans le html, si cela ferait une différence?
JamesonW

J'ai ajouté un violon plus background: none;aux boutons. Jetez un œil au violon et voyez si cela fonctionne pour vous.
Vestride

37

Cela semble fonctionner parfaitement pour moi.

button:focus { outline: none; }

4
outline:none;n'est pas recommandé pour des raisons d'accessibilité. Si vous devez supprimer la bordure du focus, veuillez fournir un autre moyen pour les utilisateurs de voir qu'il a le focus. outlinenone.com
Vestride

10

J'avais le même problème et même si je stylisais mon bouton en CSS, il ne le reprenait jamais, border:nonemais ce qui fonctionnait était d'ajouter un style directement sur le bouton d'entrée comme ceci:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

vous utilisez la cascade CSS pour remplacer la propriété par un style en ligne. Vous devriez consulter quelques articles sur la cascade CSS et la spécificité CSS.
DrCord


1

L'astuce habituelle consiste à intégrer l'image elle-même à un lien au lieu d'un bouton. Ensuite, vous liez l'événement "click" avec un gestionnaire personnalisé.

Des frameworks tels que Jquery-UI ou Bootstrap le font directement. L'utilisation de l'un d'entre eux peut faciliter beaucoup la conception de l'application dans son ensemble.


1

Vous pouvez également essayer background:none;border:0pxdes boutons.

les sélecteurs css sont également div#yes button{..}et div#no button{..}. espère que ça aide


Vous pouvez également définir l'arrière-plan du bouton sous forme d'images, à la place en utilisant des balises img

Ou faites-le en pur css. likebackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

Pour supprimer la `` bordure bleue '' par défaut du bouton sur le focus du bouton:

En Html:

<button class="new-button">New Button...</button>

Et en Css

button.new-button:focus {
    outline: none;
}

J'espère que ça aide :)



-3

$ (". myButtonClass"). css (["border: none; background-color: white; padding: 0"]);


3
Lol vous ne devriez pas utiliser jquery pour un changement de style css
zardilior
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.