html - ラベルを隠す

Question

<label>ネストされたタグに影響を与えずに、タグのコンテンツ「グループ化」を無効または非表示にしたいと考えてい<input>ます。

<label class="" for="officersheet_fields_attributes_3_grouping">
<input type="checkbox" id="officersheet_fields_attributes_3_grouping" name="officersheet[fields_attributes][3][grouping]" value="1">
Grouping
</label>`

私はレール内でformtasticを使用しています。形式的なコード スニペット <td><%= f.input :grouping %></td>

上記の行は上記の html を生成します。

前もって感謝します

Answer 1

spanラベルテキストの周りにタグを追加して非表示にします

<label for="foo">
    <input type="checkbox" value="1"><span>Grouping</span>
</label>

CSS

span{
    display:none 
}

デモ

Answer 2

を使用できますtext-indent: -1000em。

label
{
    text-indent: -1000em;
}

しかし、ラベル内に入力を入れるのは良い考えではないと思います。次のものが必要です。

<input type="checkbox"/><label>Grouping</label>

Answer 3

私もスパンに行きますが、html 構造を制御できない場合は、次のようにすることができます。

$(document).ready(function () {
    $('label')
      .contents() 
      .each(function() { 
          // if (this.nodeType == Node.TEXT_NODE);  this works unless using IE 7
          if (this.nodeType === 3) {
              $(this).remove();
          }
      });
});