如何为HTML表单输入框添加聚焦时的黄色高亮边框？

你可以借助CSS的:focus伪类来定制输入框的聚焦样式，只需要覆盖浏览器默认的聚焦轮廓，再设置黄色边框即可，完全用HTML+CSS就能实现。

完整代码示例 #

HTML（保留你原有的代码）

<div class="form">
      <form>
        <h1 id="form-header"> Sign up for our mailing list!</h1>
        Your Name:<br>
        <input class="enter" type="text" name="fname"><br>
        Email:<br>
        <input class="enter" type="email" name="email" aria-required="true"/><br>
        <button type="submit" class="submit">Submit</button>
      </form>
    </div>

CSS 样式

/* 定制输入框聚焦时的样式 */
.enter:focus {
  /* 清除浏览器默认的聚焦外轮廓，避免冲突 */
  outline: none;
  /* 设置黄色边框，可根据需求调整颜色和粗细 */
  border: 2px solid #ffd700;
  /* 可选：添加圆角让边框更贴近预期效果 */
  border-radius: 4px;
}

关键说明 #

• :focus伪类专门匹配元素获得焦点的状态（比如点击输入框时）
• 浏览器默认的聚焦效果是outline，所以必须设置outline: none才能让自定义边框正常显示
• 你可以修改#ffd700换成更贴合预期的黄色代码，也可以调整border-width的值改变边框粗细

内容的提问来源于stack exchange，提问作者greg