✨

【Tips】Panda CSSでplaceholderの色を変える

2023/10/27に公開

CSS

Panda CSS

tech

はじめに

「placeholder の色を変えたい」 そう思うことはないでしょうか。
<input />や<textarea />の実装を行っているとたまにあるかと思います。

CSS モジュールで実装する場合は以下のように擬似要素を利用すれば解決するかと思います。

::placeholder {
  color: blue;
  font-size: 1.5em;
}

詳細は MDN に詳しく書かれていますのでそちらを参照ください。合わせて参考記事も置いておきます。

では、Panda CSSで同じことを実装するにはどうすれば良いでしょうか。
また、利用頻度が高い擬似要素である::afterや::beforeはどのように実装すれば良いのか。合わせて調べてみました。

Q. 公式ドキュメントに書いてる？

Panda CSS の公式ドキュメントを確認すると下記でバッチリ言及されていました。公式ドキュメントに記載があるのはありがたいです。

::placeholderについても言及されています。

いろいろ実装してみる

以下のようなケースで何タイプが実装してみます。

作成するコンポーネントは<input />
問い合わせフォームのユーザ入力で利用する。placeholder には名前を入力してくださいと表示する
文字色、文字サイズは入力の表示、プレスホルダーで変える

JSX / TSX

import { css } from "styled-system/css";

export default function Input() {
  return (
    <>
      <input
        placeholder="名前を入力してください"
        className={css({
          color: "gray.500",
          fontSize: "1rem",
          _placeholder: {
            color: "orange",
            fontSize: "0.5rem",
          },
        })}
      />
    </>
  );
}

Vue3 (Composition API)

※ Options API での実験は行なっていません。script setup 側は import しか行っていないので、推測ですが同様のコードで動くかと思います。「Options API(Vue3/Vue2)でも動いたよ」などあればコメントください。

<script setup lang="ts">
import { css } from "styled-system/css";
</script>

<template>
  <input
    placeholder="名前を入力してください"
    :class="
      css({
        color: 'gray.500',
        fontSize: '1rem',
        _placeholder: { color: 'orange', fontSize: '0.5rem' },
      })
    "
  />
</template>

Vue3 (Composition API) + Panda CSS の Recipe (or cva)利用

Recipe 記法(下記では cva の方を利用)で実装していますが Slot Recipes 記法でも類似の実装になります。

<script setup lang="ts">
import { cva } from "styled-system/css";

const inputRecipe = cva({
  base: {
    color: "gray.500",
    fontSize: "1rem",
    _placeholder: { color: "orange", fontSize: "0.5rem" },
  },
});
</script>
<template>
  <input placeholder="名前を入力してください" :class="inputRecipe()" />
</template>

おわりに

Panda CSS は日々開発中であり Tips がほとんど出回っていないです (Vue サンプルは特にない)。
明日の自分のためにも少しずつ Tips を残していきたいです。