web-dev-qa-db-ja.com

HTML入力ボタンcss-heightがSafariで機能せず、Chrome

非常に基本的な質問があります。 HTMLフォーム送信ボタンの高さを50ピクセルに設定しています。 Firefoxでは動作しますが、ChromeまたはSafariでは動作しません。コードは次のように簡単です：

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

Chrome and Safari？

htmlbuttoninputheightsubmit
23
Madeline

<input>から<button>に変更し、CSSの先頭に-webkit-appearance: none;を追加します。例：

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

-webkit-appearance: none;に<input>を追加するだけで、Macbookのsafariブラウザーで機能しました。

8
Sachin Rana

これも機能するはずです。

  -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
5
Şήøωў

Şήøωў に追加 （賛成）回答 ：

@ Safari 11.0.2（13604.4.7.1.3）@ macOS 10.13.2（17C88）
例えば。

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

私の問題を解決した（-size主に[-webkit-] font- *効果が非常に限られています）;
「ユーザーエージェントスタイルシート」のオーバーライド：

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