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>`

我在rails中使用formtastic。形式化的代码片段 <td><%= f.input :grouping %></td>

上面的行生成上面的 html。

提前致谢

Answer 1

您可以使用text-indent: -1000em.

label
{
    text-indent: -1000em;
}

但我认为将输入放在标签内并不是一个好主意。最好有以下：

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

Answer 2

我也会选择跨度，但是如果您无法控制 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();
          }
      });
});

Answer 3

span在标签文本周围添加标签并将其隐藏

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

CSS

span{
    display:none 
}

演示