web-dev-qa-db-ja.com

<input type = "button">にパディングを追加するにはどうすればよいですか？

本格的なHTML/CSSコーディングを行ってから2か月が経過したため、多くのことを逃してしまった可能性がありますが、今日は本当に奇妙なことに遭遇しました。

paddingを<input type="submit">に適用しようとすると、機能しなくなります。私はこれを行うことができたと約99％確信していますが、今では不可能のようです。

私は古いプロジェクトの1つを見たところ、送信ボタンにパディングがあったことがわかりましたが、それらはもう機能しません。

ここに問題の小さなデモがあります

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

そしてそれがGoogleでどのように見えるかChrome 15

enter image description here

firefox 4ではまったく機能しないようです

enter image description here

JSbin.comのデモソースへのリンクです

これは約6か月前に機能していたに違いないが、何かが変わったに違いない。最近、LionにアップグレードしてWindows VistaとOS X Snow Leopardを使用していますが、それはそうではありません。

何か不足していますか？

編集：タイプミスの修正DID助けにはなりません。パディングはまだ最初のボタンに適用されていません。

edit2： Adobe Browserlab を通過した後、これはOS X固有の問題のようです。 OS Xでもこれを行う方法を知りたいです

htmlcssuser-interfacebutton
15
Jakub Arnold

この問題は、OS X Firefoxでも明らかでした。解決策は、ブラウザのデフォルトの外観を無効にしてから、独自の外観を適用することです。

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

詳細： http://css-tricks.com/almanac/properties/a/appearance/

15
Moob

<input type="submit" value="Submit" style="padding: 5x 10px;">

5pxでpを忘れました。それはスタイルを壊しています。

7
Brandon

最初にブラウザーのデフォルトスタイルボタンを削除する必要があります。これを行うには、通常、背景と境界線を変更してスタイルを変更します。これは、ボタンを変更する場合に使用するスニペットスタイルです

input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}
1
GusDeCooL

box-sizing プロパティ：

input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
0
MAChitgarha