如何停用預設的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>

#