如何消除HTML number类型输入框hover时右侧出现的滚动条

嘿，我来帮你解决这个number输入框悬停时右侧出现滚动条的问题！这种情况通常是浏览器给type="number"输入框默认添加的微调按钮（就是上下箭头），或是form-control类的CSS样式导致的，这里有两个靠谱的解决方案：

方案1：隐藏浏览器默认的数字微调按钮 #

很多浏览器会自动给数字输入框加上上下微调箭头，这些箭头可能会触发元素内部的滚动行为。我们可以用CSS把它们隐藏掉：

/* 针对Chrome、Safari等WebKit内核浏览器 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 针对Firefox浏览器 */
input[type="number"] {
    -moz-appearance: textfield;
}

方案2：确保输入框的overflow设置为hidden #

如果你的form-control类样式里不小心设置了overflow: auto或者overflow: scroll，就会在内容超出时显示滚动条。我们可以强制把它改成hidden：

.form-control {
    overflow: hidden;
}

完整的代码示例 #

把上面的CSS加到你的HTML里，就像这样：

<html>
<head>
    <style>
        /* 隐藏数字输入框的微调按钮 */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
        /* 禁止输入框出现滚动条 */
        .form-control {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="form-group">
        <br/>
        <label class="control-label">耗时：</label>
        <input type="number" id="hours" name="hours" placeholder="请输入完成此工作的总耗时。" class="form-control">
    </div>
</body>
</html>

这两个方法结合起来，基本就能彻底解决悬停出现滚动条的问题啦。如果还是有问题，可以检查一下有没有其他自定义CSS影响了这个输入框的尺寸和overflow属性~

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