スマートフォン用にコーディングするの楽しいですよね。
CSS3がキモです。
iPhoneのSafariでちまちま見ながらコーディングしてるとあることに気が付きました。
backgroundで指定した色がなんか薄い？
原因はあらかた想像はつきますが、ボタンにうっすらグラデーションがかかってるのにお気づきでしょう。
safariデフォルト設定のCSS3のグラデーションがムダに効いてしまっているようです。
グラデーションはbackgroundのgradientで指定できます。
さっそくgradientを指定してやるとこの通り↓
デフォルトのグラデーションが上書きされてCSSで指定したものにしっかり変わりました。
上下に指定したpaddingも反映されてなかったようですね。縦にすこし長くなりました。safariのバグでしょうか？
CSS3のグラデーションは記述がとてつもなく長いのでwebサービスのジェネレーターなどでコードを生成して書いてやりましょう。
ジェネレータはググればたくさん出てきますが、私はこれを良く使っています。
CSS3、うまい具合に取り入れていきたいですね。
/***** 2013.03.23追記 *****/
調べていると、CSS3のグラデーションを使わない、もっと簡単な方法がありました。
cssでinput要素のsubmitに「-webkit-appearance: button;」を書くだけです。
input[type="submit"] {
-webkit-appearance: button;
}
こんな感じに。これでベタ塗り一色のボタンもOK！
「-webkit-appearance: none;」を使うとsafariのいろんなフォームの初期設定を解除することができます。submitの場合もnoneでいいかもです。
iOS Safariだけでなくwebkit系ブラウザは全部こんなかんじなのかしら？
