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

当サイトの記事検索ボックスをこんな感じにデザインしました。

input要素に対してデフォルトのborderをいったん消してから、border-bottomを改めてかけた形ですね。

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

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

当ててみました。

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

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

border-radius: 0;

とやったら

直りました。という事例です！

【おすすめ取材記事】6ヶ月でWebデザイナーを目指すスクール

関東に7校舎展開するWebクリエイタースクール「デジLIG」の卒業生さん、スタッフさんを取材しました！

9万人以上のクリエイターを輩出してきた「デジタルハリウッドSTUDIO」と、デザインアワードを多数受賞しているWeb制作会社「LIG」の業務提携により誕生した、信頼と実績のあるスクールです。

未経験から6ヶ月で、プロのWebデザイナーを目指せる秘密を解説。
ぜひ、チェックしてみてください。

記事はこちらから