Как сделать стрелки элемента input number видимыми всегда

Input number — это HTML-элемент, который позволяет пользователю вводить числа в форму. Этот элемент включает в себя стрелки, которые пользователь может использовать для увеличения или уменьшения значения. Однако по умолчанию эти стрелки не всегда видны на некоторых браузерах. В этой статье мы рассмотрим, как сделать стрелки элемента input number видимыми всегда.

Делаем стрелки <input type=»number»> видимыми всегда с помощью CSS

Элемент <input type=»number»/> по умолчанию скрывает стрелки для выбора количества, и делает их видимыми только при фокусировке не поле ввода. Чтобы стрелки отображались всегда, необходимо указать постоянную прозрачность для них в CSS

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}

Использование CSS для изменения стилей

Существует несколько способов изменить стили элемента input number, чтобы сделать стрелки видимыми всегда. Один из таких способов — использование CSS.

В следующем примере мы установим значение свойства «appearance» элемента input number в «none», чтобы скрыть стандартные стрелки. Затем мы добавим свойство «background-image», чтобы добавить свои собственные стрелки в элемент. Также мы добавим свойства «background-position» и «background-repeat», чтобы правильно отображать стрелки внутри элемента.

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

input[type=number] {
    -moz-appearance: textfield;
    background-image: url('path/to/your/image.png');
    background-position: right center;
    background-repeat: no-repeat;
}

Замените «path/to/your/image.png» на путь к вашему изображению со стрелками.

Использование JavaScript для изменения стилей <input type=»number»>

Если вы хотите использовать JavaScript для изменения стилей элементов управления числовым вводом, то можно создать обработчики событий для стрелок и изменять стили элементов при их нажатии. В этом примере мы используем методы JavaScript для изменения значений ввода при нажатии на стрелки и добавляем класс «active» для элементов стрелок, чтобы изменить их стили. Кроме того, мы используем метод addEventListener для назначения обработчиков событий клика на элементы стрелок. Вот пример кода:

document.addEventListener('DOMContentLoaded', function() {
    var arrowUp = document.querySelector('.arrow span.up');
    var arrowDown = document.querySelector('.arrow span.down');
    var input = document.querySelector('input[type=number]');

    arrowUp.addEventListener('click', function() {
        input.stepUp();
        arrowUp.classList.add('active');
        arrowDown.classList.remove('active');
    });

    arrowDown.addEventListener('click', function() {
        input.stepDown();
        arrowDown.classList.add('active');
        arrowUp.classList.remove('active');
    });
});

В этом примере мы используем метод addEventListener для назначения обработчиков событий клика на элементы стрелок. Когда пользователь нажимает на стрелку «up», мы используем метод stepUp, чтобы увеличить значение ввода, и добавляем класс «active» для элемента стрелки «up», чтобы изменить ее стили. При нажатии на стрелку «down» мы используем метод stepDown, чтобы уменьшить значение ввода, и добавляем класс «active» для элемента стрелки «down». Мы также удаляем класс «active» для другой стрелки, чтобы вернуть ее в исходное состояние.