去掉number输入框末尾的箭头

---

场景

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