Comment puis-je ajouter un remplissage à & lt; type d'entrée = "bouton" & gt ;?

Cela fait quelques mois que je l'ai fait un peu de sérieux HTML/CSS, donc j'ai raté beaucoup de choses, mais aujourd'hui je suis tombé sur une chose vraiment étrange.

Lorsque j'essaie d'appliquer padding à un <input type="submit">il ne fonctionne plus.
Je suis sur à 99% sûr que j'ai été capable de faire cela, mais maintenant il semble comme si c'était impossible.

J'ai même regardé un de mes anciens projets, où je sais que j'ai eu rembourrage sur les boutons de soumission, mais ils ne fonctionnent plus.

Voici une petite démo du problème

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

et à quoi il ressemble dans Google Chrome 15 sur Mac

Comment puis-je ajouter un remplissage à & lt; type d'entrée =

mais il ne semble pas fonctionner dans Firefox 4 à tous les

Comment puis-je ajouter un remplissage à & lt; type d'entrée =

Voici un lien pour la démo de source sur JSbin.com

Je serais prêt à parier que c'était de travailler sur 6 mois, mais quelque chose doit ont changé. J'ai été en utilisant Windows Vista et mac OS X Snow Leopard avec la récente mise à jour de Lion, mais cela ne semble pas comme elle.

Suis-je raté quelque chose?

edit: la fixation de la typo n'A PAS aidé. Le rembourrage n'est toujours pas appliquée pour le premier bouton.

edit2: Après être passé par Adobe Browserlab il ressemble à ce qui est OS X problème spécifique. Je voudrais encore savoir comment le faire, même sur OS X si.

source d'informationauteur Jakub Arnold

  1. 15

    Cette question était évident pour moi aussi sur OS X de Firefox. La solution est de désactiver le navigateur par défaut de l'apparence avant d'appliquer votre propre:

    input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    Plus d'infos sur: http://css-tricks.com/almanac/properties/a/appearance/

  2. 6

    <input type="submit" value="Submit" style="padding: 5x 10px;">

    Vous avez oublié le " p " dans 5px. C'est de casser le style.

  3. 1

    Vous devez supprimer le navigateur par défaut du bouton de style d'abord, pour ce faire j'ai l'habitude de relooker avec un changement de fond et de bordure. Voici l'extrait de code de style-je utiliser si vous voulez changer le bouton

    input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}