场景

在很多场景下，输入框是会被要求限制只能输入数字，不能输入文字或者符号的。通常我们会使用input事件 + 正则表达式 去实现这个功能，但今天提供另一种css的方法，将 type=”number” 的数字输入框去掉末尾的箭头，直接实现一个只能输入数字的输入框。

代码

input {
	width: 300px;
	padding: 10px;
	margin-top: 20px;
	border-radius: 10px;
    border: solid 1px #ccc;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
	color: #ccc;
	font-size: 14px;
	caret-color: #ffd476;
	display: block;
}

input::-webkit-input-placeholder {
	color: #ddd;
	font-size: 14px;
}

/* 关键样式 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}