如何使用 CSS 自定义数字类型输入上的增量箭头？-css教程-PHP中文网

如何使用 CSS 自定义数字类型输入上的增量箭头？

Linda Hamilton

发布： 2024-11-12 00:20:03

原创

772 人浏览过

How Can I Customize the Increment Arrows on an Input of Type Number Using CSS?

使用 CSS 自定义数字类型输入的增量箭头

您想要修改数字类型的输入字段，使其通过自定义增量箭头看起来更时尚。默认的增量箭头（通常由加号和减号表示）可以隐藏并替换为外部按钮。

要实现此目的，您可以使用以下步骤：

删除通过将以下 CSS 应用于输入字段来显示默认增量箭头：

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

登录后复制

创建两个单独的按钮用于增量和减量操作。使用 HTML 和 CSS 定义其样式：

<button class="btn btn-plus">
    <i class="fa fa-plus"></i>
</button>

<button class="btn btn-minus">
    <i class="fa fa-minus"></i>
</button>

登录后复制

添加适当的 CSS 来调整元素的间距和对齐方式：

.input-group {
    max-width: 9rem;
    padding: .5rem;
}

.input-group .form-control {
    text-align: right;
}

登录后复制

使用 JavaScript 实现递增和递减按钮的功能：

$('.btn-plus, .btn-minus').on('click', function(e) {
    const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
    const input = $(e.target).closest('.input-group').find('input');
    if (input.is('input')) {
        input[0][isNegative ? 'stepDown' : 'stepUp']()
    }
})

登录后复制

通过实现这些更改，您可以自定义输入字段上的增量箭头，使其既美观又实用。

以上是如何使用 CSS 自定义数字类型输入上的增量箭头？的详细内容。更多信息请关注PHP中文网其他相关文章！