Comment désactiver le message de la zone de saisie HTML par défaut ?

Question

Lorsque j'appuie sur le bouton Soumettre d'une zone de texte de saisie HTML vide, ce message par défaut apparaît automatiquement. Je veux que la bordure de la boîte soit rouge au lieu de ce message par défaut. Comment faire ?

Voici le code de la boîte :

<div class="input-group" id="email-input">
 <input type="text" id="email" name="email" autocomplete="off" requis
 placeholder="E-mail">
</div>

Answer 1

1. Supprimez les attributs requis des balises HTML <input>

Supprimez l'invite "Veuillez remplir ce champ" affichée.

Pour la bordure rouge, vous pouvez envisager de faire ceci :

2. Utilisez des pseudo-classes CSS (ex : survol) pour activer des animations interactives

.input-group:hover, .input-group:focus-within {
  border-block-color: red;
  box-shadow: 0px 0px 3px 2px red;
  box-sizing: border-box;
  display: inline-block;
}

<div class="input-group" id="email-input">
  <input type="text" id="email" name="email" autocomplete="off" placeholder="Email">
</div>