如何去除input与textarea元素聚焦时的黑色边框

我懂你遇到的这个困扰——你看到的黑色边框其实是浏览器默认的outline样式，不是你设置的border，所以之前只修改border是没法去掉它的。下面给你可行的解决方案，同时兼顾美观和网页可访问性：

方案1：移除默认outline并替换自定义聚焦样式（推荐） #

直接移除默认outline的同时，添加自定义的聚焦提示，这样既解决了黑色边框问题，又能让键盘导航的用户清晰看到当前焦点位置（这是网页可访问性的基本要求哦）。修改你的CSS如下：

/* 统一表单元素基础样式 */
form input,
textarea {
  width: 98%;
  margin: 5px;
  border: 2px solid white;
  padding: 10px;
  background-color: transparent;
  font-weight: 600;
  color: white;
  font-family: 'Poppins', sans-serif;
}

/* 文本域单独配置高度与不可拉伸 */
textarea {
  min-height: 100px;
  resize: none;
}

/* 聚焦状态核心修复 */
form input:focus,
textarea:focus {
  outline: none; /* 重点：移除浏览器默认的黑色outline */
  border-color: #88bfff; /* 替换为你喜欢的聚焦边框颜色，比如浅蓝 */
  box-shadow: 0 0 4px rgba(136, 191, 255, 0.6); /* 可选：添加柔和阴影增强焦点提示 */
}

方案2：完全保留原有边框仅移除黑色outline（极简版） #

如果你想保持元素原本的白色边框，只去掉黑色聚焦轮廓，可以用这个更简单的写法：

form input:focus,
textarea:focus {
  outline: none; /* 直接移除默认黑色outline */
  /* 保留原有的白色边框，避免聚焦时边框消失 */
  border: 2px solid white;
}

为什么原有代码没生效？ #

你之前的代码存在两个问题：

• 只给form input:focus设置了border: none，但浏览器的默认outline仍然存在，所以黑色边框还会显示
• 没有给textarea:focus设置任何样式，导致文本域聚焦时依然会出现默认黑色轮廓

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