为何number类型input输入框箭头无法隐藏？如何设置.total_price的padding-top？

1. 修复Number输入框箭头无法隐藏的问题 #

你的CSS代码存在两处错误导致箭头无法隐藏：

• 选择器列表末尾多了个多余的逗号，引发语法解析错误
• 缺少针对Firefox浏览器的适配规则

修正后的代码：

/* 隐藏Chrome、Safari等WebKit内核浏览器的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; /* 可选：移除默认边距，避免布局偏移 */
}

/* 隐藏Firefox浏览器的箭头 */
input[type="number"] {
  -moz-appearance: textfield;
}

2. 修正.total_price的padding-top设置 #

你写的padding-top: 2 10px;是错误语法，padding-top属于单值属性，只能设置一个长度值。如果需要给.total_price设置顶部内边距，直接写：

.total_price {
  padding-top: 10px;
}

如果要同时设置上下左右内边距，才用多值语法（比如padding: 2px 10px;表示上下2px、左右10px），但你明确需求是padding-top，所以用单值即可。

完整修正后的CSS代码 #

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.total_price {
  padding-top: 10px;
}

内容的提问来源于stack exchange，提问作者onit