Come posso aggiungere padding a <input type = "button">?

Sono passati un paio di mesi da quando ho fatto un serio codice HTML/CSS, quindi probabilmente ho perso un sacco di cose, ma oggi mi sono imbattuto in una cosa davvero strana.Come posso aggiungere padding a <input type = "button">?

Quando si tenta di applicare padding a <input type="submit">, non funziona più. Sono sicuro al 99% di essere in grado di farlo, ma ora sembra che sia impossibile.

Ho anche guardato uno dei miei progetti più vecchi, dove so che avevo il padding sui pulsanti di invio, ma non funzionano più.

Ecco un piccolo demo del problema

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

e come appare in Google Chrome 15 su Mac

enter image description here

ma non sembra funzionare in Firefox 4 a tutti

enter image description here

Here's a link to the demo source on JSbin.com

Scommetto che questo funzionava circa 6 mesi fa, ma qualcosa deve essere cambiato. Sto usando Windows Vista e OS X Snow Leopard con un recente aggiornamento a Lion, ma non sembra.

Mi manca qualcosa?

modifica: correzione errore di battitura NON ha aiutato. Il padding non è ancora applicato al primo pulsante.

edit2: Dopo aver attraversato Adobe Browserlab sembra che questo sia un problema specifico di OS X. Mi piacerebbe comunque sapere come farlo anche su OS X.

fonte

2011-10-31 Jakub Arnold

Hai un errore di battitura nel codice. Dovrebbe essere '5px' in' ', rendendolo' ' – Sasha

Come nota, l'unico motivo per usare un elemento' input [tipo = "pulsante"] 'sarebbe con JavaScript. Perché sono così fastidiosi per lo stile, basta usare un elemento 'a [href =" # "]' invece. Per quanto riguarda 'input [type =" submit "]' ... buona fortuna. – zzzzBov

quando si utilizza il padding sui pulsanti di invio non dimenticare che esiste un bug sgradevole: http: //latrine.dgx.cz/the-stretched-buttons-problem-in-ie per correggere questo uso 'overflow: visible' – topek

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

hai dimenticato la p in 5px. Questo è rompere lo stile.

fonte

2011-10-31 22:20:18 Brandon

+1 (non so se si tratta di un errore di battitura o del problema reale, ma devo consegnarlo a te, sguardo stupefacente: P) – JCOC611

wow ... all'inizio stavo per dire "omg sono così stupido "... ma poi ho scoperto che non funziona ancora, anche dopo aver corretto l'errore di battitura: \ –

Ha funzionato per me in FF –

È necessario rimuovere prima il pulsante di stile predefinito del browser, per farlo di solito lo riattivo modificando lo sfondo e il bordo. Ecco lo stile frammento che uso se si desidera modificare il pulsante

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; 
}

fonte

2013-03-29 00:52:36 GusDeCooL

Questo problema era evidente anche per me su OS X Firefox. La soluzione è quella di disabilitare aspetto predefinito del browser prima di applicare il proprio:

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

Maggiori informazioni su: http://css-tricks.com/almanac/properties/a/appearance/

fonte

2013-11-13 09:39:13 Moob

Come posso aggiungere padding a <input type = "button">?

risposta

Problemi correlati