CSS에서 숫자 유형 입력 필드에 대해 시각적으로 매력적인 사용자 정의 증가 및 감소 버튼을 만들려면 어떻게 해야 합니까?

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

문제

숫자 유형의 입력 필드에 잘못된 스타일의 증분 화살표가 표시됩니다. 목표는 별도의 버튼처럼 더욱 미학적으로 매력적인 디자인으로 변형하는 것입니다.

제안된 솔루션

CSS 기술만으로는 원하는 결과를 완전히 얻을 수 없지만 영리한 해결 방법이 있습니다. 수행 방법은 다음과 같습니다.

1. 기본 입력 화살표 숨기기:

   CSS를 사용하여 ::-webkit-outer에서 모양을 설정: 없음 -입력 필드 내의 스핀 버튼 및 ::-webkit-inner-spin-button 의사 요소. 이렇게 하면 기본 화살표가 숨겨집니다.

2. 사용자 정의 버튼 만들기:

   다음으로 입력 필드를 두 개의 별도 버튼으로 둘러쌉니다. 하나는 감소 및 감소용입니다. 하나는 증가용입니다. 버튼의 시각적 요소에는 Font Awesome 아이콘이나 사용자 정의 이미지를 사용하세요.

3. 값 조작 처리:

   사용자 정의 버튼에 이벤트 리스너를 추가하세요. 버튼을 클릭하면 원래 입력 필드에서 stepUp 또는 stepDown 메소드를 트리거하여 그에 따라 값을 변경합니다.

구현 예(부트스트랩과 함께 jQuery 사용):

<div class="input-group inline-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary btn-minus">
      <i class="fa fa-minus"></i>
    </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">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

$('.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']()
  }
})

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

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

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

이 설정은 기본 화살표를 숨기고 증가 및 증가를 위한 사용자 정의 버튼을 추가합니다. jQuery의 stepUp 및 stepDown 메소드를 사용하여 입력 필드의 값을 감소시키고 조작합니다.

위 내용은 CSS에서 숫자 유형 입력 필드에 대해 시각적으로 매력적인 사용자 정의 증가 및 감소 버튼을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!