CSSを使用した入力の自動補完時の背景の削除方法

背景の削除方法: 入力要素の背景を削除するには、CSSのbackgroundプロパティを適切な値に設定します。以下の例を参考にしてください。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: transparent;
  background-image: none;
  color: inherit;
}

上記のCSSコードは、Webkitベンダープレフィックスを使用していますが、他のブラウザでも同様の効果が得られる場合があります。

コード例: 以下に、上記の背景削除方法を含んだ具体的なコード例を示します。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" autocomplete="name">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <!-- 他の入力フィールドも同様に追加 -->

  <input type="submit" value="送信">
</form>

/* 背景削除のCSS */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: transparent;
  background-image: none;
  color: inherit;
}

上記のコード例では、名前とメールアドレスの入力フィールドに自動補完機能を適用しています。背景の削除は、CSSのinput:-webkit-autofillセレクタを使用して実現されています。

この方法を使用することで、入力フォームの自動補完時に表示される背景を削除することができます。ご参考ください。