去掉number输入框末尾的箭头

nunumaymax

已于 2023-09-15 18:17:22 修改

阅读量416

点赞数 1

分类专栏： css 文章标签：前端 css

于 2023-07-31 11:27:37 首次发布

本文链接：https://blog.csdn.net/qq_38374286/article/details/132018591

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

去掉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;
}