CSS를 사용하여 유형 번호 입력의 증분 화살표를 어떻게 사용자 정의할 수 있습니까?

CSS를 사용하여 숫자 유형 입력 시 증분 화살표 사용자 정의

사용자 정의 증분 화살표를 사용하여 숫자 유형 입력 필드를 더 세련되게 보이도록 수정하려고 합니다. 더하기 및 빼기 기호로 표시되는 기본 증가 화살표는 숨겨지고 외부 버튼으로 대체될 수 있습니다.

이를 달성하려면 다음 단계를 사용할 수 있습니다.

1. 제거 입력 필드에 다음 CSS를 적용하여 기본 증가 화살표를 표시합니다.

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

2. 증가 및 감소 작업을 위한 두 개의 별도 버튼을 만듭니다. 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>

3. 적절한 CSS를 추가하여 요소의 간격과 정렬 조정:

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

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

4. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!