CSSのセレクタのためのチェックのラジオボタンのラベル

StackOverflow https://stackoverflow.com/questions/1431726

  •  07-07-2019
  •  | 
  •  

質問

適用できるものでcss(3)スタイルにラベルのチェックのラジオボタン?

私は、以下のマークアップ:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

何をつくろうと思いましたが 

label:checked { font-weight: bold; }

ういうものの、alasません自分は（予定).

あるセレクタを実現できるこのような機能性？ま囲とdivsなどの場合そのものの一つを使用するラベル"を"属性をもつ。

なお私は指定することができるブラウザのために自分で最高クラスのcss3などください。

役に立ちましたか？

解決 

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

作品はとてもよく、次のマークアップ:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

...で、他の構造、divsなど、ロコモコだけどデミグラスソーのラジオ入力します。

例:

input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

他のヒント

これは古い質問であることはわかっていますが、<input>を<label>の子にするのではなく、それらを個別にしたい場合は、これを達成するための純粋なCSSの方法を次に示します。

:checked + span { font-weight: bold; }

次に、テキストを<span>：

でラップします。 
<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

JSFiddle で参照してください。

最初に言及した場所を忘れましたが、実際にfor=属性が設定されている限り、他の場所のコンテナにラベルを埋め込むことができます。 SOのサンプルをチェックしてみましょう：

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

ふう。それは<！> quot; sample <！> quot;にとってはたくさんのことでした。しかし、私はそれが本当に効果とポイントを家に駆り立てていると感じています：兄弟でなくても、チェックされた入力コントロールのラベルを確実に選択できます。秘密は、 inputに子を必要なものだけにタグ付けすることです（この場合はbody要素のみ）。

label要素は実際には:checked疑似セレクターを使用しないため、ラベルがheaderに格納されているかどうかは問題ではありません。 ~は兄弟要素であるため、input[type=radio]:checked汎用兄弟セレクターを使用して<=> DOM要素から<=>コンテナーに移動し、子孫/子セレクターを使用してアクセスできるという利点もあります。 <=>自体、それぞれのラジオボックス/チェックボックスが選択されたときにスタイルを設定できるようにする。

ラベルのスタイルを設定できるだけでなく、すべての<=>に関連する兄弟コンテナの子孫である他のコンテンツのスタイルも設定できます。そして今、皆さんが待ち望んでいた瞬間、 JSFIDDLE ！そこに行き、それで遊んで、あなたのために機能させ、それが機能する理由を見つけ、それを破り、あなたがしていることをしてください！

すべてが理にかなっており、質問に答える可能性があり、場合によっては発生する可能性のあるフォローアップもあります。

入力がlabelの子要素であり、複数のラベルがある場合、 @ Mikeのトリック（Flexbox + orderを使用）。

ここに画像の説明を入力してください

html 
<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>
css 
label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

JSFiddle で参照してください。

注：兄弟セレクターは、同じ親内でのみ機能します。これを回避するには、 @ Nathan Blair ハック。

少しのjQueryを使用できます：

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

チェックしたラジオボタンにも、ページの読み込み時に正しいクラスが設定されていることを確認する必要があります。

更新：

これは、既存の生成されたhtmlが奇抜で、label sをradio sと一緒に生成し、両方にchecked属性を与えるため、私にとってのみ有効でした。

気にせず、Brilliandを育ててくれたので大騒ぎ！

ラベルがチェックボックスの兄弟である場合（通常）、~兄弟セレクターとlabel[for=your_checkbox_id]を使用してアドレス指定するか、ラベルがある場合はラベルにIDを指定します複数のラベル（この例のようにボタンにラベルを使用する場合）

同じものを探してここに来ましたが、ドキュメント。

a <=>属性を持つ<=>要素は次のように選択できます：

label[checked] {
  ...
}

古い質問であることは知っていますが、誰かに役立つかもしれません：

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top