こんにちは、ワタナベです。
先日人生初の4DXを体験してきました。
大好きで何回も観に行っていた映画が4DX化したということで見てきたのですが、ものすごかったです…！
今回はiOSでのフォームの表示について。
フォームをコーディングして、いざiOSで見てみると…
↑input要素のボタンがこんな感じになってたりしますよね！？（テキストボックスだと、PC上だと四角いのに、iOSで見ると勝手に角丸になっていたり）
これ、iOSの標準UIの見た目だそうなんですが、ぶっちゃけサイトのデザインとあってない、表示崩れしている、元のデザインより分かりにくい…ってなっている時がありますよね、、、
そんな問題を解決してくれるcssがあるんです！それがコチラ↓↓↓
-webkit-appearance: none;
これを、例えば
input[type=”submit”] {
-webkit-appearance: none;
border-radius: 0;
}
とすると、ボタンの角丸がなくなります。
角丸を調節したい場合はborder-radius:5px;などと調節すればOKです。
iOSでもPCと同じ見た目のデザインにしたい、一切見た目を変えたくない場合は
* {
-webkit-appearance: none;
}
としてしまえば、問題解決です！やったね！(*´▽｀*)
フォーム関係はいつも悩まされていますが、これで一つ解決されました(｀・ω・´)ゞ
話が変わりますが、冒頭で映画を観に行ったと話しましたが、実は映画館の場所はお台場！
偶然にもダイバーシティはすぐ近く！
「行かない」という選択肢は私にはありませんでした…壮観です！
もちろんこのあとガンダムベースの方にも行って参りました。
ものすごい品揃えでしたが、自分が欲しかった長らく再販されていないMSは残念ながら置いてありませんでした…。今後に期待です！
それではまた来月！
ご閲覧ありがとうございましたm(__)m
