CSS是前端开发不可或缺的一部分，它可以很好的控制网页的样式。常见的情况下，我们需要输入数字，而输入数字需要保障用户输入的纯净性。那么问题来了，如何让输入框只输入数字呢？下面我们就来探讨下这个问题。

input[type="text"]{
border: none;
border-bottom: 1px solid #ccc;
}
input[type="text"]:not(:focus) {
outline: none;
}
input[type="text"]:focus {
outline: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
input[type="number"]{
-moz-appearance: textfield;
}

代码分析:

input[type="text"]：选择所有input类型为文本的元素（input[type="text"]），并把边框标出来。
input[type="text"]:not(:focus)：选择所有input类型为文本的元素，如果input是没有focus的（:not(:focus)），就隐藏input的橙色轮廓线（outline:none）。
input[type="text"]:focus：选择所有input类型为文本的元素，如果input是有focus的（:focus），就隐藏input的橙色轮廓线（outline:none）。
接下来，我们开始将HTML5的input[type="number"]特性应用到我们的代码中，来实现只允许输入数字。
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
appearance: none;
margin: 0;
}
在这些CSS规则中，我们使用了-webkit-内核的属性，来禁用数字输入框的上下箭头。上述代码中，appearance: none;是去掉数字输入框的上下箭头，margin: 0;是去掉数字输入框的周围留白。接下来，将-moz-appearance的值设置为textfield，这将去除Firefox的内部微调器。