CSS를 사용하여 숫자 유형 입력의 증가 화살표를 어떻게 사용자 정의할 수 있나요?

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

이 시나리오에서는 사용자 정의를 통해 유형 숫자 입력을 시각적으로 더 매력적인 구성 요소로 변환하는 것을 목표로 합니다. 증가 화살표. 주어진 예에서는 CSS 기술과 영리한 접근 방식을 사용하여 원하는 효과를 얻습니다.

해결책:

첫 번째 단계에서는 CSS를 사용하여 기본 증분 화살표를 숨기는 작업이 포함됩니다.

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

화살표를 숨겨 나만의 사용자 정의를 만들 수 있습니다. 디자인.

다음으로 증가 및 감소 기능을 위한 두 개의 별도 버튼을 만듭니다.

<button class="btn btn-plus">+</button>
<button class="btn btn-minus">-</button>

입력 그룹을 사용하여 입력 필드의 양쪽에 이 버튼을 배치합니다.

<div class="input-group inline-group">
  <div class="input-group-prepend"><button class="btn btn-outline-secondary btn-minus">-</button></div>
  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
  <div class="input-group-append"><button class="btn btn-outline-secondary btn-plus">+</button></div>
</div>

마지막으로 버튼이 눌렸을 때 증가 및 감소 작업을 처리하는 JavaScript를 추가합니다. clicked:

$('.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, 증가 및 감소 기능을 제공하는 사용자 정의 버튼, 버튼 클릭을 처리하고 이에 따라 입력 값을 업데이트하는 JavaScript를 결합하여 원하는 사용자 정의를 제공합니다. 유형 번호 입력 시 화살표를 증가시키세요.

위 내용은 CSS를 사용하여 숫자 유형 입력의 증가 화살표를 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!