【Tailwind CSS】Tailwindでinput type=numberのspinボタンを消す方法

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はTailwind CSSを用いた場合のinput type=numberのspinボタンを消す方法を紹介します。

対象読者

• Tailwindでinput type=numberのspinボタンを消したい方

Tailwind CSSについて

Tailwind CSSはutility classを活用したCSSフレームワークです。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

完成イメージ

今回の完成イメージですがinputタグのtypeをnumberにした時、入力欄横にあるspinボタンを削除しようと思います。
spinボタンを削除して自作することが多いのではないでしょうか！

環境

動作確認環境はChromeバージョン109です。
Tailwind CSSのバージョンは3.3.0です。
環境によっては多少スタイルが崩れる可能性があるので注意してください。

CSSでの削除方法

まずはCSSで行う場合を考えてみたいと思います。
疑似要素を用いて、spinボタンを消してあげるためには、ブラウザのデフォルトスタイルを上書きしてあげる必要があります。

Chrome、Safariの場合

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

FireFox、IEの場合

input[type="number"] {
  -moz-appearance: textfield;
}

このようにベンダープレフィックスを用いて、appearanceを当てなくてはなりません。
これをTailwindに置き換えていきたいと思います。

独自のユーティリティークラスを作成して指定する

公式のissueでは独自でユーティリティークラスを作成してくださいと推奨しています。

Problem with a input of type number and Appearance with a value of none · Issue #1101 · tailwindlabs/tailwindcss

Now, apparently, can not hide the arrows, which are inherent in the field with the type number: https://jsfiddle.net/rzoupytf/ Could you please fix this in the next update?

github.com

エントリーポイントとなるCSSファイルで下記のように記述してください。

@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;
  }
}

これで完了になります。
@layerの使い方は下記を参照してください。

Functions and directives - Core concepts

A reference for the custom functions and directives Tailwind exposes to your CSS.

tailwindcss.com

クラスとして適用させる場合

Tailwindでクラスとして適用するにあたって、問題点をあげてみましょう。

• 疑似要素、疑似クラスの使い方
• タグ(input[type='number'])に対して疑似要素の使い方

この2つが主な問題点でしょうか。

まずは、Tailwindでの疑似要素と疑似クラスは、CSS同様になります。
疑似要素の場合は、::
疑似クラスの場合は、:

Hover, focus, and other states - Core concepts

Using utilities to style elements on hover, focus, and more.

tailwindcss.com

では次にタグに対して疑似要素の使い方です。
今回でいうとinput[type='number']への疑似要素の使い方です。

Tailwindでは角括弧を用いると、任意のプロパティを当てることができます。
これを利用してFireFoxとIEに対してappearance:textfield;を当てていきます。

<input type="number" class="[appearance:textfield]" />

これでFireFoxとIEは完了です。
次にChrome、Safariに対しても指定します。

<input type="number" class="[appearance:textfield] [&::-webkit-outer-spin-button] [&::-webkit-inner-spin-button]" />

&はsassやscssのときと同じ使い方です。
これでinput[type='number']::-webkit-outer-spin-buttonと&::-webkit-inner-spin-buttonに対してプロパティを当てることが可能になりました。
appearance: none;を当てれば完了になります。

<input type="number" class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />

これでChrome、Safariも完了です。

さいごに

今回はTailwind CSSを使用する際のinput type="number"のspinボタンの削除方法を紹介しました。
クラスとして適用する場合は記述量が増えるので、コードの見通し的に使い方には注意が必要かなと感じました。