¿Cómo puedo agregar relleno a <input type = "button">?

Han pasado unos meses desde que hice una codificación HTML/CSS seria, así que probablemente me he perdido muchas cosas, pero hoy tropecé con algo muy extraño.¿Cómo puedo agregar relleno a <input type = "button">?

Cuando intento aplicar padding a un <input type="submit">, ya no funciona. Estoy aproximadamente 99% seguro de que pude hacerlo, pero ahora parece como si fuera imposible.

Incluso miré uno de mis proyectos más antiguos, donde sé que tenía relleno en los botones de envío, pero ya no funcionan.

He aquí una pequeña demostración del problema

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

y cómo se ve en Google Chrome 15 en Mac

enter image description here

pero no parece funcionar en Firefox 4 en absoluto

enter image description here

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

Apuesto a que esto funcionó hace aproximadamente 6 meses, pero algo debe haber cambiado. He estado usando Windows Vista y OS X Snow Leopard con una actualización reciente a Lion, pero eso no parece ser así.

¿Echo de menos algo?

corregir: corregir el error NO AYUDA. El relleno aún no se aplica al primer botón.

edición2: Después de pasar por Adobe Browserlab parece que se trata de un problema específico de OS X. Sin embargo, me gustaría saber cómo hacer esto incluso en OS X.

Fuente

2011-10-31 Jakub Arnold

Tienes un error tipográfico en el código. Debe ser '5px' en el' ', lo que lo hace' ' – Sasha

Como nota, la única razón para usar un elemento' input [type = "button"] 'sería con JavaScript. Debido a que son una molestia para el estilo, simplemente use un elemento 'a [href =" # "]' en su lugar. En cuanto a 'input [type =" submit "]' ... buena suerte. – zzzzBov

al usar relleno en los botones de envío, no olvide que hay un desagradable error, es decir: http: //latrine.dgx.cz/the-stretched-buttons-problem-in-ie para arreglar este uso 'overflow: visible' – topek

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

se le olvidó la p en 5px. Eso es romper el estilo.

Fuente

2011-10-31 22:20:18 Brandon

+1 (no sé si es un error de pregunta o el problema real, pero tengo que decírtelo, OJO INCREÍBLE: P) – JCOC611

guau ... al principio estaba a punto de decir "Dios mío, soy tan estúpido" "... pero luego descubrí que todavía no funciona, incluso después de corregir el error tipográfico: \ –

Funcionó para mí en FF –

Primero debe quitar el botón de estilo predeterminado del navegador, para hacerlo, generalmente lo cambio de estilo con el fondo y el borde. Aquí está el estilo de fragmento que uso si quiero cambiar el botón

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

Fuente

2013-03-29 00:52:36 GusDeCooL

Este problema fue evidente para mí también en OS X Firefox. La solución es desactivar el aspecto por defecto del navegador antes de aplicar su propia:

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

Más información en: http://css-tricks.com/almanac/properties/a/appearance/

Fuente

2013-11-13 09:39:13 Moob

¿Cómo puedo agregar relleno a <input type = "button">?

Respuesta

Cuestiones relacionadas