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 関連記事