如何增大 input 上的 arrow 调整按钮？

原创于 2023-08-03 17:54:15 发布 · 637 阅读

CC 4.0 BY-SA版权

文章标签：

博客介绍了增大输入框（input）箭头调整按钮的方法。可使用 CSS 选中 input 元素的 spin buttons 并设置宽度和高度。示例代码适用于 WebKit 内核浏览器，在其他浏览器调整可能需用不同厂商前缀、选择器或方法，修改时要注意整体风格一致。

要增大输入框（input）上的箭头调整按钮，通常需要修改其样式。箭头调整按钮（也称为 spin buttons）是指 input 元素的类型为 “number” 或 “datetime” 时，显示在输入框两侧的用于增加或减少值的小按钮。

你可以使用 CSS 来调整箭头按钮的大小。具体做法是通过选择器选中 input 元素的 spin buttons，并设置其宽度和高度。

下面是一个示例 CSS 代码来增大 input 元素的箭头调整按钮：

/* 选择所有 input 类型为 "number" 或 "datetime" 的 spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="datetime"]::-webkit-inner-spin-button,
input[type="datetime"]::-webkit-outer-spin-button {
  /* 设置箭头按钮的宽度和高度 */
  width: 24px;
  height: 24px;
}

在上述代码中，我们使用了 -webkit-inner-spin-button 和 -webkit-outer-spin-button 伪元素选择器来选中 input 元素的内部和外部 spin buttons。然后，通过设置宽度和高度，我们将箭头按钮的大小调整为 24 像素。

请注意，由于 spin buttons 的样式在不同的浏览器中可能有所不同，上述代码可能只适用于 WebKit 内核的浏览器（如 Chrome 和 Safari）。如果需要在其他浏览器中调整箭头按钮的大小，你可能需要使用其他厂商前缀和选择器，或者使用不同的方法来实现。

另外，增大箭头按钮的大小可能会导致样式不一致或不美观，建议在修改样式时注意保持整体风格的一致性。