ホームページ >ウェブフロントエンド >CSSチュートリアル >検索入力タイプを使用するために何が得られますか?
検索入力タイプを使用すると、いくつかの機能が提供されますが、いくつかの癖も提示します。
丸い外観(Safari): Safariは、丸みを帯びた外観で検索入力をレンダリングしますが、これは常に現在のMacOSスタイリングと一致するとは限りません。本質的に否定的ではありませんが、一貫性がない場合があります。
フォントサイズオーバーライド(Safari): Safariは、検索入力でカスタムfont-size
設定を無視します。これには-webkit-appearance: none;
ウェブサイト間の一般的な慣行であるデフォルトのスタイリングをオーバーライドするために、(またはその標準化されていない同等物)。
クリアボタン:テキストが存在するときに入力フィールド内に組み込みの「x」アイコンが表示され、ユーザーが入力を簡単にクリアできるようにします。これは間違いなく、検索入力タイプを使用することの最も有益な機能であり、スタイリングオーバーライドの後でも持続します。
AutoComplete:ブラウザは、過去の検索用語に基づいてオートコンプリートの提案を提供します。検索入力は排他的ではありませんが、このコンテキストでは最も関連性があり論理的です。
フォームロール: role="search"
属性の追加親に属性を追加します<form>要素は、技術を支援するフォームの目的を明確に識別することにより、アクセシビリティを改善します。</form>
ラベルの要件:適切です<label></label>
拡大ガラスアイコンまたはプレースホルダーのテキストが視覚的に使用されている場合でも、要素はアクセシビリティに重要です。
増分属性(非標準):非標準のインクリメンタル属性は、ライブ検索機能に役立つDOM要素の展開された検索イベントをトリガーします。ただし、ブラウザのサポートは限られています(Firefoxにはありません)。
ジョブセキュリティ(フロントエンド開発者の場合):検索入力スタイリングの複雑さにより、フロントエンド開発者の継続的な雇用が保証されます。
以上が検索入力タイプを使用するために何が得られますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。