Houn

Web制作

公開日:2019.07.18

更新日:2022.05.02

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

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

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

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

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

当ててみました。

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

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

border-radius: 0;

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

サイト保守費の決済を全自動でラクにしませんか?

Square定期請求書

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか?

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare(スクエア)というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する(Squareを利用)」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

無料でSquareに登録してみる