Safariでフォームや検索欄を入力すると、文字が水色でハイライトされることがあります。この表示は便利な場合もありますが、デザインや視認性の問題で消したい場合もあります。本記事では、原因の解説と安全に表示を消す方法を具体例とともに紹介します。
水色表示の正体は自動入力機能
Safariの水色表示は、自動入力や候補表示機能によるものです。ユーザーが過去に入力した情報をブラウザが覚えており、入力欄にフォーカスすると候補がハイライトされます。
例えば、メールアドレス欄で以前入力したアドレスが候補として表示される場合、水色の背景で強調されます。
自動入力設定を確認する
iPhoneやMacでSafariの設定を確認すると、自動入力のオン・オフが選べます。iOSでは「設定」→「Safari」→「自動入力」で、Macでは「Safari」→「環境設定」→「自動入力」で管理できます。
自動入力をオフにすると、入力欄で水色表示される候補が出なくなり、表示を抑えることができます。
フォームのスタイルをカスタマイズする方法
ウェブ開発者向けには、CSSで入力欄のハイライト色を変更できます。例: input:-webkit-autofill { background-color: white !important; } と指定すると、自動入力時の水色背景を白に変更できます。
この方法は自分のサイト上でのみ適用できるため、他サイトでは反映されません。
一時的に水色表示を消す操作
入力中だけ水色表示を消したい場合は、候補が出ているときにEscキーを押すとハイライトを非表示にできます。Macの場合、Escキーで候補リストを閉じることが可能です。
また、iOSでは入力欄をタップして水色背景が出たら、画面をタップしてフォーカスを外すことで非表示にできます。
まとめ
Safariで入力欄の水色表示は、自動入力や過去の入力履歴によるハイライトが原因です。設定から自動入力をオフにするか、ウェブサイト上でCSSを調整することで表示を抑えることができます。一時的に消したい場合は、Escキーやフォーカス操作で簡単に非表示にできます。
コメント