Bagaimana untuk melumpuhkan mesej kotak input HTML lalai?

Question

Apabila saya menekan butang hantar kotak teks input html kosong, mesej lalai ini muncul secara automatik. Saya mahu sempadan kotak menjadi merah dan bukannya mesej lalai ini. Bagaimanakah saya boleh melakukannya?

Berikut ialah kod untuk kotak:

<div class="input-group" id="email-input">
 <input type="text" id="email" name="email" autocomplete="off" diperlukan
 pemegang tempat="E-mel">
</div>

Answer 1

1. Alih keluar atribut yang diperlukan daripada teg <input>

Alih keluar gesaan "Sila isi medan ini" yang dipaparkan.

Untuk sempadan merah, anda boleh pertimbangkan untuk melakukan ini:

2. Gunakan kelas pseudo CSS (cth: hover) untuk mendayakan animasi interaktif

.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>