Houn

【iOS】input要素にwebkit-appearance: noneが効かないときの対処
2019.07.18

Web制作メモ

【iOS】input要素にwebkit-appearance: noneが効かないとき(角が丸い)

当サイトの記事検索ボックスをこんな感じにデザインしました。
searchform-input-pc
input要素に対してデフォルトのborderをいったん消してから、border-bottomを改めてかけた形ですね。

このデザインをiPhoneの実機で確認したところ、丸みを帯びていました。

そんなときはググればすぐ出てくるのが「-webkit-appearance: none;を当てて、iOSデフォルトのスタイルをリセットしよう」というもの。

当ててみました。

しかし直らなかったんですね。

そこで、丸みを帯びているわけですからふと単純に

border-radius: 0;

とやったら
searchform-input-pc
直りました。という事例です!

Share on SNSシェア

Related 関連記事