2020-1-20

フォームのdisableスタイルの個人的実装ベタープラクティス

デモ

要約

• disable 時の見た目は opacity で対応。
  • デザインもそのように作ってもらう必要はある。
• フォームパーツのグループや、フォームパーツ以外にも disable な見た目にする必要がある場合は fieldset を使う

disable 時の見た目は opacity で対応。

フォームの disable 時の見た目は input 等のようなフォームパーツだけを気にすれば OK な話ではなく、デモのようにフォーム周辺のテキストに対しても気を使う必要がある。

disabled 時のスタイルとしては、大きく下の２パターンになるかと思う。

• border-color, color を指定の色に変更
• opacity で半透明に変更

「border-color, color を指定の色に変更」に関しては、非常に面倒な事になる場合があるので避けたほうがいい。

例えば、最初は disable になるパーツには黒色のテキストしかなく、disable な時には灰色にすればよかったとする。ただ運用の結果、黒以外の文字色（例えば赤）が入った場合に「赤色の文字も灰色にしていいのか？」という問題が発生する。
もちろん「赤色の場合はちょっと薄い赤色に」とかなると地獄。

「opacity で半透明に変更」でやっておけば、色のパターンが増えたとしてもルールとして破綻しないので問題は発生しない。

具体的なスタイル指定例

デモが全てだが、肝は以下の部分。

/* フォームパーツ単体でdisabled指定された場合のスタイル */
.c-radio_input:disabled,
.c-radio_input:disabled ~ *,
select:disabled {
  opacity: var(--disable-opacity);
}

/* fieldset単位でdisabled指定された場合のスタイル */
fieldset:disabled {
  opacity: var(--disable-opacity);
}

/* 二重でopacityがかからないように、打ち消す必要がある */
fieldset:disabled .c-radio_input:disabled,
fieldset:disabled .c-radio_input:disabled ~ *,
fieldset:disabled select:disabled {
  opacity: initial;
}

複数のフォームパーツのグループだったり、フォームパーツ以外にも disable 時に色を薄くする必要がある場合は fieldset を使用する。