Chrome下Input输入框边框出现半灰色异常问题咨询

我来帮你搞定这个输入框边框异常的问题！从你提供的CSS代码和描述来看，这个半灰色边框的问题大概率是几个细节没处理到位，下面给你分析原因和修复方案：

可能的原因分析 #

• 你只设置了border-width和border-color，但没有显式指定border-style。CSS边框要正常显示，border-style是必填项（Chrome里input默认的border-style是inset，但当你自定义宽度和颜色后，很容易出现渲染异常）。
• 另外，-webkit-appearance: none虽然去掉了默认的表单样式，但也可能间接导致边框渲染的特殊情况。

修复后的CSS代码 #

把你的.circleInput样式补充完整，添加border-style: solid;，同时优化细节确保显示一致：

.circleInput{
  border-width: 2px;
  border-style: solid; /* 新增这行，明确边框样式 */
  border-color: rgb(230,230,230);
  outline-width: 0;
  border-radius: 3.5vh;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.0vw;
  background-color: white;
  -webkit-appearance: none;
}

额外排查点 #

如果添加border-style后还是有问题，可以检查这两个点：

• Chrome的自动填充样式：当输入框被自动填充时，浏览器会覆盖部分样式，你可以加下面的代码强制覆盖：

  .circleInput:-webkit-autofill {
    border-color: rgb(230,230,230) !important;
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
  }
  

• 父元素样式干扰：看看输入框的父元素有没有设置opacity、filter或者其他可能影响子元素边框的样式。

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