CSS: Cómo aumentar el tamaño de un botón de envío de OSX

Question

¿Cómo puedo aumentar el tamaño del botón de envío de formulario nativo para OSX-Safari?

Quiero mantener el aspecto original de un FORM botón de enviar para su respectivo sistema operativo, mientras que también se agranda el tamaño del botón Enviar. (Es decir, sin el uso de imágenes, bordes personalizados, etc ..)

Utilizando el siguiente CSS:

input.submitbutton {font-size:150%;} 

En Windows, este aumento de la altura del tamaño botón de enviar y anchura que desear ... independientemente de la navegador (Safari, Firefox, IE, Chrome).

Pero en OSX - Safari no aumenta el tamaño del botón en absoluto. El tamaño del botón de formulario sigue siendo el tamaño predeterminado.

Answer 1

input.submitbutton{ 
    width:200px; 
    height:500px; 
} 

parece obvio, pero ¿ha intentado cambiar el tamaño del elemento en lugar del tamaño de la fuente?

Answer 2

Los botones de formulario de Safari son muy difíciles de diseñar (si no imposibles).

Como han dicho otros, la altura es bastante intocable.

Lo que puede hacer es establecer el tamaño de fuente en un tamaño de píxel exacto para cambiar el tamaño del botón.

input.submitbutton {font-size:14px;} 

Eso debería hacer que el tamaño de fuente sea más grande y el botón también. Sin embargo, se maximiza ... no puedes seguir aumentando el tamaño de la fuente.

Answer 3

El "aspecto nativo" de un pulsador incluye una altura fija por definición

Push Button Especificaciones

tamaños de control: pulsadores están disponible en regular, pequeña, y mini tamaños. La altura de un botón es fija para cada tamaño, pero especifica el ancho, según la longitud de el texto de la etiqueta que proporcione. Si no especifica un botón lo suficientemente ancho, los extremos cortan el texto.

Lo que se quiere no sería "nativo" y por lo tanto implicará necesariamente la creación de una imagen personalizada de, o siempre se puede hacer algo como esto

http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

Answer 4

tratar de incluir esta propiedad CSS en su estilo:

-webkit-appearance: botón;

Espero que esto ayude!

Answer 5

Si aplica un borde al botón, Safari abandona su botón brillante y puede hacer lo que quiera con él.

Answer 6

o utilice la etiqueta <button>. Particletree! Rediscovering the Button Element

Answer 7

estoy usando varios de entrada type="button" y el uso que el estilo bien:

input[type="button"] { 
-webkit-appearance: button; 
height:40px; 
} 

No lo hicieron estilo sin la línea -wbkit-.

Answer 8

Es una carcasa de borde, pero si intenta todo tipo de cosas y no puede hacer que Safari haga etiquetas de botones más pequeñas, podría activar la opción "Nunca utilizar tamaños de fuente menores que X" en preferencias de Safari:

Esto me enganchó ayer. Simplemente desactívelo y Safari tendrá más que probablemente respetará sus directivas CSS.