inputの入力の有無でボタンの表示&非表示をCSSで調整する

JSでやってしまえば簡単なんですが、CSSでこんなこともできるよ!
ということで今回はinputの入力の有無でボタンの表示&非表示をCSSで調整してみました。

今回使用したCSSの値はこれ!
「:placeholder-shown」

これは、input内にテキストがない場合という指示になります。
そのため、今回は上記値を使用して

入力が無い場合はボタンを表示しない。
入力がある場合はボタンを表示する。

というのを実装してみました。

下記、input内にテキストを入力してみてください。
ボタンが表示されます。

See the Pen cssでボタンの表示非表示 by sayuri (@giraffeweb) on CodePen.light

CSSは以下の通り。

input:placeholder-shown + button { 
  display: none;
}

簡単ですよね!
みなさんもぜひ機会があればCSSで実装してみてください。
IE以外のブラウザには対応してます。