ios系でもフォームにスタイルを効かせるには！？

inputタグなど、フォームをCSSでスタイリングするときに、
PCやアンドロイド端末だとキレイに装飾出来てるのに、
iphoneやipadで確認したときだけ、
スタイルがなぜか効いていない。。。

そんなときは、次の魔法のスタイルを書き込んであげましょう＾＾

-webkit-appearance: none;

具体的な使い方

■スタイルが効かない書き方

input {
	border: solid 1px #333;
	border-radius: 2px;
}

■スタイルが効く書き方

input {
	border: solid 1px #333;
	border-radius: 2px;
	-webkit-appearance: none; /* これを追加 */
}

これでiphoneやipadでも、フォーム系のタグにスタイルが効くようになります＾＾！

appearanceって何だろね

appearanceは、表示をプラットフォームごとの標準的なUIにするプロパティみたいです。
ios系だと「appearance」が効いてて、ios標準のフォームスタイルになっちゃいます。
だから「-webkit-appearance」の値を「none」にして、標準スタイルを解除してやるって感じですね＾＾
ちなみに「-webkit-」はchromeやios系に効くようにするベンダープレフィックスです！