隐藏标签答案

【问题标题】：Hiding the label隐藏标签
【发布时间】：2013-03-12 09:12:42
【问题描述】：

我想禁用或隐藏“分组”内容的<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。格式代码sn-p <td><%= f.input :grouping %></td>

上面一行生成了上面的html。

提前致谢

【问题讨论】：

标签： html css input label

【解决方案1】：

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

label
{
    text-indent: -1000em;
}

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

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

【讨论】：

将input 放在label 内有什么问题？ W3C 表示 label 可以放在 input > w3.org/TR/html401/interact/forms.html#edef-LABEL 之前、之后或周围。
问题是它是由rails中的formtastic自动生成的。代码<td><%= f.input :grouping %></td>
当然可以，而且也有效。但是标签是输入控件的可点击文本。我认为将输入控件放在里面不是很干净。此外，当您将它们分开时，您会更加灵活。
感谢 Linus Caldwell，BenM

【解决方案2】：

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

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

CSS

span{
    display:none 
}

DEMO

【讨论】：

【解决方案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();
          }
      });
});

【讨论】：