CSS: Come aumentare la dimensione di un pulsante di invio OSX

Question

Come aumentare la dimensione del pulsante di invio FORM nativo per OSX-Safari?

Voglio mantenere l'aspetto nativo di un pulsante di invio FORM per il rispettivo sistema operativo mentre si ingrandiscono anche le dimensioni del pulsante di invio. (Significato, nessun uso di immagini, bordi personalizzati, ecc ..)

Utilizzando il seguente CSS:

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

In Windows, questo aumento l'altezza presentare dimensioni del pulsante e la larghezza, se lo desideri ... a prescindere dal browser (Safari, Firefox, IE, Chrome).

Ma su OSX - Safari non aumenta affatto le dimensioni dei pulsanti. Le dimensioni del pulsante del modulo rimangono le dimensioni predefinite.

Answer 1

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

Sembra ovvio, ma hai provato a cambiare la dimensione dell'elemento invece della dimensione del carattere?

Answer 2

I pulsanti di forma di Safari sono notoriamente difficili da stilare (se non impossibile).

Come altri hanno già detto, l'altezza è praticamente intoccabile.

Quello che puoi fare è impostare la dimensione del carattere su una dimensione esatta del pixel per ridimensionare il pulsante.

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

che dovrebbero rendere la dimensione del carattere più grande e il pulsante pure. Fa il massimo fuori però ... non si può semplicemente continuare ad aumentare la dimensione del carattere.

Answer 3

il "look nativo" di un pulsante comprende un'altezza fissa, per definizione,

Push Button Specifiche

misure di controllo: pulsanti vengono disponibili in regolare, piccole, e mini dimensioni. L'altezza di un pulsante è fissa per ciascuna dimensione, ma si specifica la larghezza, a seconda della lunghezza dello del testo dell'etichetta che si fornisce. Se si specifica che non è un pulsante sufficientemente largo, i cappucci terminali ritagliano il testo.

Ciò che si vuole non sarebbe "nativo" e quindi necessariamente comportare la creazione di un'immagine personalizzata, o si può sempre fare qualcosa di simile

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

Answer 4

cercare di includere questa proprietà CSS sul tuo stile:

-webkit-aspetto: pulsante;

Spero che questo aiuti!

Answer 5

Se si applica un bordo al pulsante, Safari abbandona il pulsante lucido e si può fare ciò che si desidera con esso.

Answer 6

o utilizzare il tag <button>. Particletree! Rediscovering the Button Element

Answer 7

Sto usando diversi di ingresso type="button" e usando loro stile ok:

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

Non hanno stile senza la linea -wbkit-.

Answer 8

Si tratta di un caso limite, ma se si sta cercando ogni sorta di cose e non si può avere Safari per rendere le etichette dei pulsanti più piccoli, si potrebbe hanno attivato il “font Non usare mai di dimensioni inferiori a X” nella preferenze di Safari:

Questo mi ha portato a casa ieri. Basta spegnerlo e Safari sarà molto più probabile che rispetti le tue direttive CSS più.