H5去掉输入框type为number时的上下箭头

最新推荐文章于 2023-05-21 13:13:12 发布

雪芽蓝域zzs

最新推荐文章于 2023-05-21 13:13:12 发布

阅读量1.3k

点赞数 3

分类专栏： Html5 文章标签： css

本文链接：https://blog.csdn.net/qq_36158551/article/details/103807812

版权

Html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

H5去掉输入框type为number时的上下箭头

html5中，input type="number"时右边会有一个上下小箭头，介绍去掉这个箭头的方法，完成浏览器的兼容，页面效果的统一
在这里插入图片描述

一。公共样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>去掉输入框type为number时的上下箭头</title>
		<style>
			/*谷歌*/
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance: none;
			}
			/*火狐*/
			input[type="number"] {
				-moz-appearance: textfield;
			}
		</style>
	</head>
	<body>
		<input type="number" ...>
	</body>
</html>

二。专用样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>去掉输入框type为number时的上下箭头</title>
		<style>
			/*在谷歌下移除input[number]的上下箭头*/
			.inputNumber input[type='number']::-webkit-outer-spin-button,
			.inputNumber input[type='number']::-webkit-inner-spin-button {
				-webkit-appearance: none !important;
				margin: 0;
			}
			/*在firefox下移除input[number]的上下箭头*/
			.inputNumber input[type="number"] {
				-moz-appearance: textfield;
			}
		</style>
	</head>
	<body>
		<input type="number" class="inputNumber" placeholder="请输入电话号码"> 1
	</body>
</html>

雪芽蓝域zzs

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
H5去掉输入框type为number时的上下箭头

H5去掉输入框type为number时的上下箭头 html5中，input type="number"时右边会有一个上下小箭头，介绍去掉这个箭头的方法，完成浏览器的兼容，页面效果的统一一。公共样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>去...
复制链接

扫一扫

专栏目录