web-dev-qa-db-ja.com

入力がラベル内にある場合のCSSチェックボックスとラジオボタン

私はこれに対する答えをここで広範囲に検索しましたが、私が探しているものにはまったく出会っていません。これを見つけました 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

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

cssinputcheckboxradio-buttonlabel
32
Bob Loblaw

実際のラベルテキストをラップするようにマークアップを編集できる場合、たとえば：

<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;  
}​

デモ： http://jsfiddle.net/dMhDM/1/

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

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

13
Wesley Murch

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

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

親に基づいて子を選択することの反対：

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

実行したいことは、jQueryを使用して実現できます。

this postをチェックしてください。

3
agit

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

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

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

そのようなパターンがなく、チェックボックスIDが任意に選択されている場合、JavaScriptに頼らなければなりません。

1
Madara Uchiha

PURE CSSによるhtmlを台無しにせずにこれを行うための私見の最良の方法は

 input[type="checkbox"] {
     position: relative;
     cursor: pointer;
     padding: 0;
     margin-right: 10px;
}
 input[type="checkbox"]:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     margin-top: -2px;
     width: 20px;
     height: 20px;
     background: #fcfcfc;
     border: 1px solid #aaa;
     border-radius: 2px;
}
 input[type="checkbox"]:hover:before {
     background: #f5821f;
}
 input[type="checkbox"]:focus:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
 input[type="checkbox"]:checked:before {
     background: #f5821f;
     border-color: #f5821f;
}
 input[type="checkbox"]:disabled {
     color: #b8b8b8;
     cursor: auto;
}
 input[type="checkbox"]:disabled:before {
     box-shadow: none;
     background: #ddd;
}
 input[type="checkbox"]:checked:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 8px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
}
1
Satsangpriyadas Swami