如何禁用默认的HTML输入框消息?

Question

当我按下一个空html输入文本框的提交按钮时，这个默认消息就会自动出现。我想让框的边框变成红色，而不是这个默认消息。我该怎么做呢?

下面是这个盒子的代码:

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

Answer 1

1. 从HTML <input>标记中删除所需的属性。

删除显示的“请填写此字段”提示。

对于红色边框，你可以考虑这样做:

2. 使用CSS伪类(例如:hover)来启用交互式动画

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