elegantes - estilos css para botones submit

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 FORMATO nativo para OSX-Safari?

Quiero mantener el aspecto nativo de un botón de envío de formulario para su respectivo sistema operativo al mismo tiempo que agranda el tamaño del botón de envío. (Es decir, sin uso de imágenes, bordes personalizados, etc.)

Usando el siguiente CSS:

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

En Windows, esto aumenta la altura y el ancho del botón de envío según lo deseado ... independientemente del navegador (Safari, Firefox, IE, Chrome).

Pero en OSX, Safari no aumenta el tamaño del botón. 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 forma de Safari son notoriamente difíciles de diseñar (si no imposibles).

Como otros han dicho, 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 la 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 botón incluye una altura fija por definición

Especificaciones de botón pulsador

Tamaños de control: los botones están disponibles en tamaños regular, pequeño y mini. La altura de un botón se fija para cada tamaño, pero usted especifica el ancho, dependiendo de la longitud del texto de la etiqueta que proporcione. Si no especifica un botón lo suficientemente ancho, los extremos cortan el texto.

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

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

Answer 4

Intenta incluir esta propiedad de CSS en tu estilo:

-webkit-apariencia: 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 use la etiqueta <button> . Particletree! Redescubriendo el elemento de botón

Answer 7

Estoy usando varios type="button" entrada type="button" y me dan un buen estilo usando:

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

No estilizaron sin la línea -wkkit.

Answer 8

Es un caso extremo, pero si estás intentando todo tipo de cosas y no puedes hacer que Safari haga etiquetas de botones más pequeñas, es posible que hayas activado la opción "Nunca usar tamaños de letra menores que X" en las preferencias de Safari:

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