如何修复textarea光标错位、聚焦边框异常及表单自动填充背景问题

三个问题的原因和对应修复方式如下： #

1. textarea光标贴左上角无内边距 #

• 问题原因：你将padding属性错误写在了textarea::placeholder选择器中，该样式仅作用于占位符文本，不会对textarea本身的内容输入区域生效；另外HTML中textarea的行属性拼写错误，正确属性名是rows而非row。
• 修复操作：
  1. 修正HTML中textarea的属性拼写：

<textarea
  class="message"
  placeholder="Message"
  rows="4"
  required
></textarea>

2. 将内边距样式写到textarea本身的规则中，删除textarea::placeholder里无效的padding、margin属性（伪元素不支持margin设置）：

textarea {
  min-height: 100px;
  background-color: transparent;
  color: white;
  font-family: 'Poppins', sans-serif;
  width: 98%;
  margin: 5px;
  border: 2px solid white;
  resize: none;
  font-weight: 600;
  padding: 10px; /* 内边距加在这里 */
}

textarea::placeholder {
  color: white;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

2. textarea聚焦时黑色边框样式不生效 #

• 问题原因：你只编写了input:focus的样式规则，没有覆盖textarea的聚焦状态；同时浏览器默认会给聚焦的表单控件添加outline外轮廓，这就是你看到的黑色边框来源；另外你原有input:focus的边框宽度设为1px，和非聚焦状态的2px不一致，会导致聚焦时元素尺寸跳动。
• 修复操作：添加统一的聚焦样式，移除默认outline，保持边框宽度和非聚焦状态一致：

input:focus, textarea:focus {
  outline: none; /* 清除浏览器默认黑色外轮廓 */
  border: 2px solid white; /* 和非聚焦状态边框宽度、颜色保持统一 */
}

3. 表单控件自动填充时出现白色背景 #

• 问题原因：这是Webkit内核浏览器（Chrome、Edge、Safari等）的默认自动填充样式，普通background属性无法覆盖默认样式，需要通过浏览器专属伪类:-webkit-autofill修改。
• 修复操作：添加以下CSS规则，同时可以统一自动填充状态的文字颜色：

/* 覆盖自动填充默认样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: white; /* 自动填充文本颜色和现有样式统一 */
  /* 用内阴影覆盖默认白色背景，如果表单容器是深色背景，可将transparent替换为对应背景色值，比如#000 */
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* 避免页面加载时自动填充背景闪白 */
}

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