5

I am trying to remove the arrow/spinners that come natively with a number typed input field. I understand that this can easily be done following the article here, by setting the -webkit-appearance and -moz-appearance. With that said, here is my current implementation using a CSS class called .no-spin.

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance: textfield !important;
}
<div>
  <label>Number Input Field w/o spinner</label>
  <input class="no-spin" type="number">
</div>
<div>
  <label>Number Input Field w/ spinner</label>
  <input type="number">
</div>

However, since I am using Tailwind, I am looking for a possible solution where I do not have to resort to CSS classes, just like the other components of my project. I have already tried using an appearance-none class as suggested by the Tailwind Docs but it did not work for me.

AmehPls
  • 158
  • 1
  • 12

1 Answers1

1

Yes, you could add [appearance:textfield] which would be generated as:

.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
          appearance: textfield;
}

That should do the trick

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-2 bg-green-200">
  <input class="[appearance:textfield] m-4 bg-gray-100" type="number" name="" placeholder="1" id="" />
</div>
George Lords of Castle
  • 899
  • 2
  • 9
  • 18
Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • 3
    This did not work for me. Also, running the code snippet still produces the native input with the arrow/spinners. I have edited my original post to include the intended CSS that I am attempting to produce with Tailwind. – AmehPls Apr 05 '22 at 06:31
  • @AmehPls this probably works for Firefox but not for Chrome – Heechul Ryu Mar 28 '23 at 23:04