How to disable the default HTML input box message?

Question

When I press the submit button of an empty html input textbox, this default message appears automatically. I want the border of the box to be red instead of this default message. How do I do that?

Here is the code for the box:

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

Answer 1

1. Remove the required attributes from the HTML <input> tag.

Remove the displayed "Please fill in this field" prompt.

For the red border, you may consider doing this:

2. Use CSS pseudo-classes (eg: hover) to enable interactive animations

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