为何.email:focus与.pass:focus样式失效？Facebook风格输入框高亮异常

你的代码出现样式失效，大概率是浏览器默认的focus轮廓样式覆盖了自定义样式，或是基础的input边框设置没到位。试试以下调整：

修正后的CSS代码 #

/* 先给输入框统一基础样式，确保默认边框存在 */
.email, .pass {
  border: 1px solid #dddfe2; /* 贴近Facebook默认边框色调 */
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 17px;
  width: 330px;
  box-sizing: border-box;
}

/* 合并focus样式，减少重复代码 */
.email:focus, .pass:focus {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px #e7f3ff; /* 调整阴影色更贴近Facebook效果 */
  outline: none; /* 关键：去掉浏览器自带的focus轮廓，避免覆盖自定义样式 */
}

失效原因说明 #

• 浏览器默认会给获得焦点的input添加outline轮廓样式，这个轮廓会覆盖你设置的border和box-shadow，导致自定义样式看不到。加上outline: none;就能解决这个核心问题。
• 如果input没有设置基础border，focus时的border-color变化可能不明显，所以先给输入框设置好默认边框样式是必要的。

保持原样的HTML代码 #

<div class="login">
  <input class="email" type="text" name="email" id="email" placeholder="Email or phone number" autofocus="1" aria-label="Email or phone number" autocomplete="off" required>
  <input class="pass" type="password" name="pass" id="pass" placeholder="Password" aria-label="password" autocomplete="off" required>
</div>

按上述代码修改后，输入框获得焦点时就会显示蓝色边框和对应阴影，和Facebook登录框效果一致。

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