Pulsante di immissione HTML css-height non funziona su Safari e Chrome

Ho una domanda molto semplice. Sto impostando l'altezza a 50px per il mio pulsante di invio del modulo html. Funziona su Firefox ma non su Chrome o Safari. Il codice è il seguente:Pulsante di immissione HTML css-height non funziona su Safari e Chrome

<input type="submit" value="Send" style="height:50px;" />

Qualche idea su come farlo funzionare su Chrome e Safari?

fonte

2012-09-16 Madeline

Io non sono sicuro perché questo non funziona da sola, ma so che se si aggiunge un colore di sfondo che leggerà il vostro 'attributo height':' ' – tcd

Funziona in Safari 5 e Chrome 20 quando non è coinvolto nessun altro CSS. Ti preghiamo di considerare di modificare la tua domanda per includere il tuo CSS. – Jay

bene sta funzionando per me forse hai più css che non ci stai mostrando? – Linas

Modificarlo <input>-<button> e aggiungere -webkit-appearance: none; per l'inizio della vostra CSS, ad esempio:

.submitbtn { 
    -webkit-appearance: none; 
    height: 50px; 
    background-color:#FFF; 
    color:#666; 
    font-weight:bold; 
    border: solid #666 1px; 
    font-size: 14px; 
}

fonte

2012-09-16 23:28:32 MeltingDog

L'ho fatto e funziona benissimo. Grazie molto. – Madeline

+1 da parte mia! Questo ha risolto il mio problema di stile per la visualizzazione del mio sito Web su un iPhone. Grazie!! –

In realtà ... sono corretto. Il mio problema è stato risolto aumentando la dimensione del carattere, cambiandolo in un 'pulsante' non è stato risolto per me. Come l'OP, ha funzionato bene in Firefox ma non è cambiato in Safari, il che è stato importante per me perché volevo che funzionasse su iPhone. –

Questo dovrebbe funzionare anche.

-webkit-appearance:default-button;

ci sono un bel paio di parametri per questa proprietà che si può decidere di sfruttare e/o guardare fuori per. Inoltre, se volessi semplicemente disabilitare le ombre interne dei campi di input, potresti semplicemente usare -webkit-appearance: caret ;.

button 
button-bevel 
caret 
checkbox 
default-button 
listbox 
listitem 
media-fullscreen-button 
media-mute-button 
media-play-button 
media-seek-back-button 
media-seek-forward-button 
media-slider 
media-sliderthumb 
menulist 
menulist-button 
menulist-text 
menulist-textfield 
none 
push-button 
radio 
searchfield 
searchfield-cancel-button 
searchfield-decoration 
searchfield-results-button 
searchfield-results-decoration 
slider-horizontal 
slider-vertical 
sliderthumb-horizontal 
sliderthumb-vertical 
square-button 
textarea 
textfield

fonte

2015-02-23 02:13:57

Tutti questi valori sono rilevanti per questa particolare domanda? Puoi forse ridurlo a un paio di quelli più rilevanti? –

Quelle sono le possibili vars per quello che ho detto -webkit-appearance: button; per esempio. –

Solo l'aggiunta di -webkit-appearance: none; sul mio <input> lavorato per me su browser Safari su Macbook.

fonte

2015-10-15 05:58:01

Aggiungendo Şήøωў s' ^(upvoted)answer:

@ Safari 11.0.2 (13604.4.7.1.3) @ MacOS 10.13.2 (17C88)
esempio

input[type=button]{ 
    -webkit-appearance: button; 
}

risolto il problema (solo -size lo più [-webkit-] font- * di effetto molto limitato);
prevalente "User Agent foglio di stile":

input:matches([type="button"], [type="submit"], [type="reset"]){ 
    -webkit-appearance: push-button; 
}

fonte

2018-01-19 00:26:54 vike

Pulsante di immissione HTML css-height non funziona su Safari e Chrome

risposta

Problemi correlati