Tailwind CSS와 Mozilla 호환성을 이용해 Input type Number에서 화살표를 제거하는 방법

소개

만약 Tailwind CSS를 사용 중이고 input 타입 number의 화살표를 제거하고 싶다면, 정확한 정보를 찾으셨습니다. 기본적으로 브라우저는 숫자 입력란에 화살표를 표시하지만, 몇 가지 조정을 통해 Tailwind CSS를 사용하여 화살표를 숨길 수 있습니다.

해결책 1: Global CSS 사용하기

스타일을 HTML과 분리하려는 경우, 글로벌 CSS 파일에 몇 줄의 코드를 추가하여 해결할 수 있습니다. 다음과 같이 진행하면 됩니다:

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

이 코드는 숫자 입력란의 내부 및 외부 스핀 버튼을 대상으로 하며, 숨기기 위해 필요한 스타일을 적용합니다. 이제 화살표는 더 이상 보이지 않아야 합니다.

해결책 2: Mozilla와의 호환성

Mozilla Firefox와의 호환성을 보장하고 싶다면, 다음 코드를 사용할 수 있습니다:

@layer base {
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number'] {
    -webkit-appearance: none;
    -moz-appearance: textfield !important;
    margin: 0;
  }
}

-moz-appearance: textfield 속성을 추가함으로써 Firefox에서 화살표가 제거되고 브라우저 간에 일관된 동작을 보장할 수 있습니다.

해결책 3: Tailwind CSS 플러그인 사용하기

Tailwind CSS 구성 내에서 이를 처리하려면 플러그인을 사용할 수 있습니다. 다음과 같이 진행하면 됩니다:

// tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    require("@tailwindcss/forms")({
      strategy: 'class', // 클래스만 생성
    }),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.arrow-hide':{
          '&::-webkit-inner-spin-button':{
            '-webkit-appearance': 'none',
            'margin': 0
          },
          '&::-webkit-outer-spin-button':{
            '-webkit-appearance': 'none',
            'margin': 0
          },
        }
      })
    })
  ],
}

이 설정으로 number 입력란에 arrow-hide 클래스를 추가하면 화살표가 숨겨집니다.

해결책 4: Select 컴포넌트 사용하기

숫자 입력란에서 화살표를 제거하는 것이 중요하고 이전 해결책이 모두 작동하지 않는다면, 대신 select 컴포넌트를 사용할 수 있습니다. 예시를 살펴보겠습니다:

<select type="number" id="amount" name="amount">
  <option value="0">0</option>
</select>

input 대신 select 요소를 사용함으로써 원하는 결과를 얻을 수 있습니다. 추가적으로, 필요한대로 select 요소에 Tailwind CSS 클래스나 제공된 CSS 해결책을 사용하여 스타일을 지정할 수 있습니다.

결론

Tailwind CSS를 사용하여 숫자 입력란의 화살표를 제거하는 것은 글로벌 CSS 스타일이나 Tailwind CSS 플러그인을 이용하여 쉽게 달성할 수 있습니다. 프로젝트 요구사항에 가장 적합한 방법을 선택하고, 화살표의 방해 없이 숫자 입력을 원하는 대로 사용자화할 수 있는 유연성을 즐기세요.

일관된 동작을 보장하기 위해 다른 브라우저에서 솔루션을 테스트하세요. 이제 화살표를 제거하여 더 깨끗한 사용자 경험을 만들고, Tailwind CSS의 힘을 이용하세요.

참고 자료 : 

reactjs