web-dev-qa-db-fra.com

Comment puis-je ajouter un rembourrage à <input type = "button">?

Cela fait quelques mois que je n'ai pas fait de codage HTML/CSS sérieux, donc j'ai probablement manqué beaucoup de choses, mais aujourd'hui je suis tombé sur une chose vraiment bizarre.

Lorsque j'essaie d'appliquer padding à un <input type="submit">, ça ne marche plus. Je suis sûr à 99% que j'ai pu le faire, mais maintenant, il semble que c'était impossible.

J'ai même regardé l'un de mes projets les plus anciens, où je sais que j'avais un remplissage 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

enter image description here

mais cela ne semble pas du tout fonctionner dans Firefox 4

enter image description here

Voici un lien vers la source de démonstration sur JSbin.com

Je parierais que cela fonctionnait il y a environ 6 mois, mais quelque chose a dû changer. J'utilise Windows Vista et OS X Snow Leopard avec une mise à niveau récente vers Lion, mais cela ne semble pas être le cas.

Suis-je en train de manquer quelque chose?

edit: correction de la faute de frappe DID PAS d'aide. Le remplissage n'est toujours pas appliqué au premier bouton.

edit2: Après avoir traversé Adobe Browserlab il semble que ce soit un problème spécifique à OS X. Je voudrais quand même savoir comment faire cela même sur OS X.

htmlcssuser-interfacebutton
15
Jakub Arnold

Ce problème était également évident pour moi sur OS X Firefox. La solution consiste à désactiver l'apparence par défaut du navigateur avant d'appliquer la vôtre:

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

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

15
Moob

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

Vous avez oublié le p en 5px. Cela brise le style.

7
Brandon

Vous devez d'abord supprimer le bouton de style par défaut du navigateur, pour ce faire, je le retouche généralement en modifiant l'arrière-plan et la bordure. Voici le style d'extrait que j'utilise si je veux 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;
}
1
GusDeCooL

Tu devrais utiliser box-sizing propriété:

input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
0
MAChitgarha