HTMLのInputにフォーカスがないときにCSSで値を非表示にする方法

2024/6/1 HTML/CSS/JavaScript/TypeScript, Tips, プログラミング

HTMLとCSSのみを使いInput要素がフォーカスされていないときはテキストを非表示にしたかったので、その方法についての備忘録。

よく使う方法ではdisplay: none、visibility: hiddenなどがありますが、これだと入力できなくなってしまうので今回はNG、color: transparentやopacity: 0は元の設定値が分からないと戻せないのと、Input要素自体を範囲選択すると反転表示で値が見えてしまうのが微妙でしたので、別の方法を考えてみました。

対応

text-indentで入力テキストを見えない位置に移動させる。

サンプルソース(HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hide Input Value Example</title>
<style>
  input:not(:focus) {
       text-indent: 200%;
       overflow: hidden;
  }
</style>
</head>
<body>
  <input type="text" value="非表示化されたテキスト">
</body>
</html>

JSFiddle

動作イメージ

Inputにフォーカスインしたときだけ値が表示されるようになりました。

以上です。