フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件

Category
CSS
iPhone
Bookmark

フォームボタンにbackground-colorプロパティを指定すると、iPhone Safariではなぜかグラデーションがかかり、更に色が薄くなります。

デフォルトの状態


こんな感じですね。

background-colorで背景色を指定した状態

#sample {
  -webkit-border-radius: 4px;
  background-color: rgb(1,47,145);
}

<input type="submit" value="Submit" id="sample" />

こうすると、


グラデがかかり、色も薄くなってしまっています。

単色のgradientで指定する

これを解決するには、一色のみを指定したgradientを使用します。

#sample {
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(1,47,145)));
}

<input type="submit" value="Submit" id="sample" />


単色になりました。


ちなみに、なぜかpaddingも減ってるように見えます。

サンプルファイル