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

要增大输入框(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)。如果需要在其他浏览器中调整箭头按钮的大小,你可能需要使用其他厂商前缀和选择器,或者使用不同的方法来实现。

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

你可能感兴趣的:(html,css)