CSS3下input标签编辑状态border-color失效问题求助

问题出在你没处理输入框的聚焦状态，而且浏览器默认的聚焦轮廓会干扰自定义边框样式。直接修改CSS，添加:focus伪类的样式即可：

input[class*=bright][type=text]::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgb(150,230,255);
}
input[class*=bright][type=text]::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(235,255,255);
    opacity: 1;
}
input[class*=bright][type=text] {
  color:rgb(50,200,255);
  background:rgb(235,255,255);
  border-style:solid;
  border-color:rgb(50,200,255);
  border-radius:5px;
}
/* 新增聚焦状态样式 */
input[class*=bright][type=text]:focus {
  border-color: rgb(50,200,255); /* 保持原边框色，可替换为你需要的其他颜色 */
  outline: none; /* 移除浏览器默认的黑色聚焦轮廓 */
  /* 可选：添加自定义聚焦阴影增强视觉反馈 */
  box-shadow: 0 0 4px rgba(50,200,255,0.6);
}

为什么之前的代码无效？ #

1. :active伪类对应元素被点击激活的瞬间状态，而输入框处于编辑状态时是聚焦状态，需要用:focus伪类来匹配。
2. Chrome、Edge等webkit内核浏览器会给聚焦的input添加默认的黑色outline，这个默认样式会覆盖你的边框设置，所以必须用outline: none移除它，再重新定义聚焦时的边框样式。

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