如何在HTML中禁用输入类型数字的增加减少按钮 - CSS

在HTML中使用<input>元素的type="number"属性时，会自动显示一个增加和减少按钮，用于调整数字输入字段的值。如果您想禁用这些按钮，可以使用CSS来解决此问题。

禁用数字输入类型的增加和减少按钮

要禁用数字输入类型的增加和减少按钮，可以使用以下CSS代码：

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

这个CSS代码使用两个伪元素选择器来针对数字输入类型的增加和减少按钮进行设计。::-webkit-inner-spin-button用于内部按钮（即增加按钮），::-webkit-outer-spin-button用于外部按钮（即减少按钮）。通过-webkit-appearance: none，这将完全删除这些按钮。 margin: 0;用于在某些浏览器（如Firefox）中确保按钮被正确地删除。

以下是一个示例表单，其中包含一个使用数字类型的输入字段：

<form>
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" min="18" max="99">
</form>

添加CSS后，该输入字段将不再具有增加和减少按钮：

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

结论

现在，您已经知道如何使用CSS来禁用数字输入类型的增加和减少按钮。还有其他方法可以通过JavaScript或jQuery来达到相同的目的，但这种方法是最简单和最快速的方法。

markdown 代码片段

# 如何在HTML中禁用输入类型数字的增加减少按钮 - CSS

在HTML中使用`<input>`元素的`type="number"`属性时，会自动显示一个增加和减少按钮，用于调整数字输入字段的值。如果您想禁用这些按钮，可以使用CSS来解决此问题。

## 禁用数字输入类型的增加和减少按钮

要禁用数字输入类型的增加和减少按钮，可以使用以下CSS代码：

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

这个CSS代码使用两个伪元素选择器来针对数字输入类型的增加和减少按钮进行设计。::-webkit-inner-spin-button用于内部按钮（即增加按钮），::-webkit-outer-spin-button用于外部按钮（即减少按钮）。通过-webkit-appearance: none，这将完全删除这些按钮。 margin: 0;用于在某些浏览器（如Firefox）中确保按钮被正确地删除。

以下是一个示例表单，其中包含一个使用数字类型的输入字段：

<form>
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" min="18" max="99">
</form>

添加CSS后，该输入字段将不再具有增加和减少按钮：

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

结论

现在，您已经知道如何使用CSS来禁用数字输入类型的增加和减少按钮。还有其他方法可以通过JavaScript或jQuery来达到相同的目的，但这种方法是最简单和最快速的方法。