ブロックチェーンチームのソフトウェアエンジニアの 
id:odan3240 です。
Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。
この記事では、その際の問題と解決方法について紹介します。
この記事のゴール
Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。
例えば、<input :style="{ paddingLeft: myPadding }">で、input タグの padding-left は myPadding を更新することで動的に変更されます。
しかし、これらの構文では ::placeholder の疑似要素だけを指定できず、結果スタイルを変更できません。
CSS カスタムプロパティによる解決
CSS カスタムプロパティ とは、JS などのプログラミング言語の変数と同じように、CSS で変数が使える機能です1。使用例は以下の通りです。
.class { /* 変数の宣言。`--` が先頭に付く */ --main-bg-color: brown; /* `var` を使って変数を使用する */ background-color: var(--main-bg-color); }
SCSS などの CSS プリプロセッサの変数は、プリプロセス時に変数が置換されて定数として CSS に埋め込まれます。それに対して CSS カスタムプロパティは CSS の変数としての機能を持つので、JS から --main-bg-color を書き換えれば、動的に背景色を変更することが可能です。
このCSS カスタムプロパティを用いて、疑似要素の動的にスタイル変更できます。次の codepen は input タグの ::placeholder 疑似要素を動的に右にずらすサンプルです。
See the Pen abNpQmx by odanado (@odanado) on CodePen.
インラインスタイルのバインディングを使って CSS カスタムプロパティを定義しています。このカスタムプロパティを padding-left に渡しています。
これにより、Vue.js 側で変更された値が CSS カスタムプロパティとして CSS に伝わり、動的に padding を変更することができます。
まとめ
CSS カスタムプロパティをインラインスタイルのバインディングを用いて設定することで、疑似要素に動的なスタイルを適用する方法を紹介しました。
