输入框激活状态下无法修改边框颜色，尝试:active、:focus伪类无效

问题修复方案 #

根因说明 #

• 仅使用:active伪类不符合需求：:active仅在鼠标按压元素的瞬间生效，松开按键后样式就会失效，输入框处于激活可输入状态对应的正确伪类是:focus
• 未关闭浏览器默认的聚焦外轮廓：绝大多数浏览器默认会给聚焦状态的input添加outline属性的高亮样式，会覆盖自定义的边框效果，这也是很多开发者加了:focus样式依然不生效的核心原因
• 现有样式代码未声明:focus状态下的边框规则
• 现有disabled伪类下的border属性写法存在语法错误，缺少solid关键字，会导致该状态样式不生效

修复后代码 #

CSS代码（如果使用SCSS嵌套写法请确保编译工具配置正确）

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;
    /* 关闭浏览器默认外轮廓，也可以仅在:focus伪类内声明 */
    outline: none;

    &:active {
      font-size: 13px;
      border: 2px solid Red;
      background-color: #ffffff;
    }

    /* 新增focus伪类样式，实现输入框激活时的边框变色效果 */
    &:focus {
      font-size: 13px;
      border: 2px solid Red;
      background-color: #ffffff;
    }

    &:disabled {
      /* 补全solid关键字修正语法错误 */
      border: 1px solid black;
      border-radius: 0px;
      background-color: #F9FAFB;
    }
}

可选优化HTML代码（补全id属性实现点击label自动聚焦输入框）

<div class="container">
    <form>
      <label for="input-field">Text</label>
      <input type="text" id="input-field" placeholder="...">
      <button>..</button>
    </form>
 </div>

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