如何使input type="number"交互时边框颜色保持不变？

浏览器为type="number"的输入框内置了默认交互样式，输入框聚焦、激活时，默认样式的优先级高于普通类选择器设置的边框规则，会覆盖你之前设置的绿色边框，显示为默认黑色，部分浏览器还会额外显示默认的蓝色外发光轮廓。

直接替换原有CSS里的.number__select相关样式，补充交互状态的强制规则、清除浏览器默认轮廓即可，修改后的代码如下：

.number__select{
    width: 60px;
    margin-top: 10px;
    border-radius: 30px;
    /* 合并边框简写属性，明确指定边框宽度、样式、颜色，避免属性解析异常 */
    border: 1px solid #009900;
    text-align: center;
    /* 清除浏览器默认的聚焦外轮廓 */
    outline: none;
}

/* 强制覆盖聚焦、激活状态下的边框样式，保持绿色统一 */
.number__select:focus,
.number__select:active {
    border-color: #009900;
    /* 可选：需要聚焦弱提示效果就保留下面这行阴影，不需要直接删除 */
    box-shadow: 0 0 0 2px rgba(0, 153, 0, 0.2);
}

替换完成后，输入框在默认、聚焦、输入修改数值的所有交互状态下，边框都会保持设置的绿色。

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