スマホ用にサイトをコーティングしていてはまってしまったのでφ(`д´)メモメモ…

スマホ用のサイトでinput要素にbox-shadowを適応しても、
反映されない表示されなかったのでぐぐって調べてみました。

iPhoneのinputにbox-shadowが適用できなくて苦戦してたけど、デフォルトで適用されてるものを上書きすればいいだけだった。つまりwebkit-gradientを書かなきゃいけない。こんなの気づかないよ普通。

— oda yuji (@scots_brave) October 13, 2011

デフォのデザインを上書きしてあげないと出ないみたいですね・・・
めんどくせー
ただでさえ、CSSのResetやらVendorPrefixでめんどくさいのにww

これで一応box-shadowがつかえます。

// Safari 4+, Chrome 2+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFFFFF), to(#FFFFFF));
// Safari 5.1+, Chrome 10+
background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF);

ががが、もうちょっとスマートな方法ないかなーっと調べてみたところ

ありました。

-webkit-appearance: none;
appearance: none;

これを指定するとブラウザーがデフォで設定してるデザインが解除できるらしいです。

フォームとかガチガチにデザインするならこの先結構つかうかもなぁw