• Home
  • Archive
  • iPhoneのinputにbox-shadowが適応できない。

iPhoneのinputにbox-shadowが適応できない。

iPhoneのinputにbox-shadowが適応できない。

スマホ用にサイトをコーティングしていてはまってしまったのでφ(｀д´)ﾒﾓﾒﾓ...

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

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

--- oda yuji (@scots_brave) October 13, 2011

デフォのデザインを上書きしてあげないと出ないみたいですね・・・
めんどくせー
ただでさえ、CSSのResetやらVendorPrefixでめんどくさいのにｗｗ
これで一応box-shadowがつかえます。

hoge {
    /* 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);
}

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

hoge {
    -webkit-appearance: none;
    appearance: none;
}

これを指定するとブラウザーがデフォで設定してるデザインが解除できるらしいです。
かガチガチにデザインするならこの先結構つかうかもなぁｗ

Profile

Kazuki Hayashi

I'm a full stack engineer.
I love programming and alcohol.

TOC

Tag

Develop
CSS