テキスト入力フィールドに透明なアイコンを簡単に追加するにはどうすればよいですか?

アイコンを使用したクリア テキスト入力の作成

Web フォームでは、特に入力値をクリアする直感的な方法を提供することが望ましいことがよくあります。テキスト入力要素。これにより、カーソル ナビゲーションに頼らずに入力を迅速に削除できるため、ユーザー エクスペリエンスが向上します。

jQuery ベースのソリューション

jQuery は、入力の作成を容易にするいくつかのプラグインを提供します。統合された明確なアイコンを備えた要素。これらのプラグインを使用すると、入力フィールド内でアイコンを正確に配置できます。

カスタム CSS の実装

または、カスタム CSS を使用して、依存せずに明確なアイコンを作成できます。サードパーティのライブラリ。

input[type=search] {
  padding-right: 20px;  /* Adjust as needed */
}

input[type=search]::after {
  content: "×";
  position: absolute;
  right: 5px;  /* Adjust as needed */
  top: 5px;  /* Adjust as needed */
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

input[type=search]:focus::after {
  color: #000;
}

「検索」の使用属性

簡単な解決策は、type="search" 属性を input 要素に追加することです。これにより、最新のブラウザでは透明なアイコンが自動的に表示されます。ただし、この方法は Internet Explorer 10 より前のバージョンでは機能しないことに注意してください。

<input type="search">

以上がテキスト入力フィールドに透明なアイコンを簡単に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。