:blank

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

注: :blank セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

CSSWG issue #1967 を参照してください。

:blankCSS擬似クラスで、空のユーザー入力要素 (例えば <input><textarea>) に一致します。

構文

:blank

単純な :blank の例

最終的に対応しているブラウザーでは、 :blank 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

HTML

<textarea></textarea>

CSS

textarea:blank {
  border: 3px solid red;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:blank の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:blank
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1197736.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報