36

私はこれに対する答えをここで広範囲に検索しましたが、私が探しているものに完全には出くわしていません。このCSSを見つけました-選択したラジオボタンラベルのスタイルを設定する方法は？しかし、答えにはマークアップの変更が含まれていました。これは避けたいことであり、以下で説明します。

XenForoフォーラムのテーマにカスタムcss3チェックボックスとラジオボタンを追加しようとしています。これで読んだすべてのチュートリアルには、入力後にラベルが付いています。

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

ただし、XenForoのマークアップでは、入力はラベル内にあります。

<label for="ctrl_enable_rte">
<input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} />
{xen:phrase use_rich_text_editor_to_create_and_edit_messages}
</label>

これがなぜであるかを調べましたが、マークアップがこのようになっている場合、カスタムcssチェックボックス/ラジオボタンに関連するものは見つかりませんでした。ここではフォーラムシステムを扱っているので、マークアップを変更する必要はありません。これには、一連のコアテンプレートの編集が含まれます。その後、フォーラムソフトウェアのたびにマークアップを更新する必要があります。更新を出します（テンプレートが変更されたと想定します）。

このタイプのマークアップで機能するCSSルールを作成しようとしましたが、これまでのところ成功していません。私はCSSの経験があまりなく、すべてのセレクターを覚えているわけではなく、疑似クラスはまだ私にはかなり異質なので、これが可能かどうか、もしそうなら、どのように私がここにいる誰かが光を当てることができるかを期待していましたそれについて行くかもしれません。私はすでにスプライトの準備ができています。CSSを理解する必要があります。

私の主な問題は、ラベルを選択する方法がわからないことです（もちろん、これらの入力に関係するラベルのみ）。通常は次のようなものです

input[type="checkbox"] + label

が使用されますが、ラベルが入力の後ではなく、その外側/前にある場合...どのように選択しますか？

4

4 に答える 4

17

マークアップを編集して実際のラベル テキストを折り返すことができる場合は、次のようになります。

<label>
    <input type="checkbox">
    <span>One</span>
</label>
<label>
    <input type="checkbox">
    <span>Two</span>
</label>
<label>
    <input type="checkbox" disabled>
    <span>Three</span>
</label>

CSS でいくつかのトリックを実行できます。

label {
    position:relative;   
    cursor:pointer;
}
label [type="checkbox"] {
    display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
    display:inline-block;
    padding:1em;
}
:checked + span {
    background:#0f0;
}
[type="checkbox"][disabled] + span {
    background:#f00;  
}​

デモ：

label {
  position: relative;
  cursor: pointer;
}

label [type="checkbox"] {
  display: none;
}

[type="checkbox"]+span {
  display: inline-block;
  padding: 1em;
}

:checked+span {
  background: #0f0;
  display: inline-block;
}

[type="checkbox"][disabled]+span {
  background: #f00;
}
<label>
    <input type="checkbox">
    <span>One</span>
</label>
<label>
    <input type="checkbox">
    <span>Two</span>
</label>
<label>
    <input type="checkbox" disabled>
    <span>Three</span>
</label>

http://jsfiddle.net/dMhDM/1/

ブラウザが をサポートしていない場合、これは失敗することに注意してください:checked。

これは基本的に他のソリューションと同じですが、スタイリングはラベルではなくスパンで行われます。

于 2012-11-09T22:56:39.790 に答える
3

残念ながら、CSSでは、子要素に基づく親要素のスタイル設定は許可されていません。これは簡単な方法の例です。

div.a < div { border: solid 3px red; }

親に基づいて子を選択するのとは反対です。

div.a > div { border: solid 3px red; }

あなたがやりたいことはjQueryを使って達成することができます。

この投稿をチェックしてください。

于 2012-11-09T22:53:57.353 に答える
1

非常に興味深い質問です。正直なところ、CSSだけでは不可能だと確信しています。

ラベルのfor属性（）に何らかのパターンがある場合はctrl_enable_rte、希望があります。たとえば、すべてのチェックボックスラベルがで終わる場合はrte、次のように使用できます。

label[for$=rte] { ... }

そのようなパターンがなく、チェックボックスIDが任意に選択されている場合は、JavaScriptを使用する必要があります。

于 2012-11-09T22:53:59.997 に答える