Wie deaktiviere ich die Standardnachricht im HTML-Eingabefeld?

Question

Wenn ich in einem leeren HTML-Eingabetextfeld auf die Schaltfläche „Senden“ drücke, wird diese Standardmeldung automatisch angezeigt. Ich möchte, dass der Rand des Felds rot ist, anstatt dieser Standardmeldung. Wie mache ich das?

Hier ist der Code für die Box:

<div class="input-group" id="email-input">
 <input type="text" id="email" name="email" autocomplete="off" erforderlich
 placeholder="E-Mail">
</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>