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