6

私が基本的なウェブページを持っているとしましょう：

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

ここで、ラベルのテキストをオフにすると赤に、チェックをオンにすると青にしたいとします。どうすればいいですか？次のような基本的なものが欲しいです。ここでは、「子供がいる」という意味の架空の演算子「<」を使用しますが、そのような演算子がないため、もちろん機能しません。

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

理論上の「<」以外はすべて有効なCSSであるため、この動作を実現する実際の方法があるかどうか疑問に思います。JavaScriptを使用せずに、チェックボックスの状態に基づいてラベルのスタイルを設定する有効なCSS 3（またはそれ以前のバージョン）の方法を知っている人はいますか？

4

3 に答える 3

4

ラベル内に入力フィールドを配置するべきではありません。

ラベルの内容はチェックボックスの後に表示されるため、HTMLを次のように作成します。

    <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> 
    <LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>

​

そして、このCSSを使用します。

#THE_LABEL {
    color: red;
}

#THE_CHECKBOX:checked + #THE_LABEL {
    color: blue;
}​

ライブデモ

は+兄弟セレクターです。IE8以下ではサポートされていません。

于 2012-08-21T05:10:00.767 に答える
1

申し訳ありませんが、参照してください：

CSSの親セレクターはありますか？アクティブな子の親のための複雑なCSSセレクター

このトピックについての詳細はありますが、それは不可能のようです。

于 2012-08-21T05:08:34.923 に答える
1

これはCSS4で機能すると思いますが、これは今のところ理論上のものです。

#THE_LABEL{
  color:red;
}
#THE_LABEL /for/ :checked {
  color:blue;
}

JSFiddleテスト

ブラウザのサポート

確認のために、数か月ごとにこれに戻ってきます。次のレイアウトエンジンの最新バージョンのサポートステータスは次のとおりです。

  • WebKit：いいえ（Safari、iOS Webビュー）
    • 点滅：いいえ（Chrome、Chromiumベースのブラウザー、多くのオープンソースプロジェクト、Android Webビュー）
  • Gecko：いいえ（Firefox、多くのオープンソースプロジェクト）
  • トライデント：いいえ（IE、Windows Webビュー、Steam）
    • EdgeHTML：いいえ（Microsoft Edge）
于 2015-05-06T11:49:53.570 に答える