【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公式

今回の完成予定

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

環境

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

cssでの削除方法

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

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では独自でユーティリティークラスを作成してくださいと推奨しています。

エントリーポイントとなる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 & Directives – Tailwind CSS

tailwind公式

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

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

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

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

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

参考

Handling Hover, Focus, and Other States – Tailwind CSS

tailwind公式

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

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

appearance:textfield<input
  type="number"
  className="[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ボタンの削除方法を紹介しました。
クラスとして適用する場合は記述量が増えるので、コードの見通してきに使い方には注意が必要かなと感じました。

スポンサーリンク