【CSS】input type=”submit”のスタイルが変わらない?

しょうもない話だけど、こないだプチハマった出来事を。

下記のようなスタイルを宣言したところ、思った通りのスタイルにならなかった。

// sample.css
input[type="submit"] {
  padding: 1em 2em;
}

// sample.html
<input type="submit">

表示結果:

input submitの表示結果

あれ?Safariだけおかしい。
余白が適用されていない。

なんでかなーと思ったら、border-styleのプロパティによるみたい。

CSSのスタイルに、

border-style:none;

とか追加したら、Safariも他のブラウザと同じように余白が設定されました。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください