HTML輸入按鈕css-height在Safari和Chrome上不工作

我有一個非常基本的問題。我爲我的html表單提交按鈕設置高度爲50px。它適用於Firefox，但不適用於Chrome和Safari。代碼如下簡單：HTML輸入按鈕css-height在Safari和Chrome上不工作

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

任何想法如何使它在Chrome和Safari上工作？

來源

2012-09-16 Madeline

我不知道爲什麼，這並不單獨工作，但我知道，如果你添加背景顏色將讀取你的'height'屬性：'' – tcd

當沒有其他CSS參與時，它可以在Safari 5和Chrome 20中運行。請考慮編輯您的問題以包含您的CSS。 – Jay

以及它爲我工作也許你有更多的CSS，你沒有向我們展示？ – Linas

變化從<input>到<button>並添加-webkit-appearance: none;你的CSS開始，如：

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

來源

2012-09-16 23:28:32 MeltingDog

我做到了，效果很好。非常感謝。 – Madeline

+1！這解決了我在iPhone上查看我的網站時遇到的樣式問題。謝謝！！ –

其實......我糾正了。我的問題是通過增加字體大小來解決的，將其改爲「按鈕」並不能解決問題。像OP一樣，它在Firefox中運行良好，但在Safari中沒有改變，這對我來說很重要，因爲我希望它能夠在iPhone上工作。 –

這也應工作。

-webkit-appearance:default-button;

這個屬性有很多參數，你可能想要利用和/或小心。另外，如果你只是想禁用輸入字段的內部陰影，你可以使用-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

來源

2015-02-23 02:13:57

所有這些值是否與這個特定問題有關？你能把它縮小到幾個最相關的嗎？ –

這就是我說的可能的變數-webkit-appearance：button;作爲例子。 –

只是增加我的<input>爲我工作在Safari瀏覽器上的Macbook -webkit-appearance: none;。

來源

2015-10-15 05:58:01

添加到Şήøωў的^{（upvoted）}answer：

@ Safari瀏覽器11.0.2（13604.4.7.1.3）@ MACOS 10.13.2（17C88）
例如

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

解決了我的問題（僅大多[-webkit-] font- *具有非常有限的影響-size）;
壓倒一切的「用戶代理樣式表」：

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

來源

2018-01-19 00:26:54 vike

HTML輸入按鈕css-height在Safari和Chrome上不工作

回答

相關問題