html - 如何使用 CSS 隐藏复选框标题

Question

正如您在下图中所见，表格内容很长，最后的 td 内容也很丑陋。 (对不起，本地语言，但相信我，内容并不重要。)

我想要的是仅使用 CSS 隐藏复选框标题。很难不输出标题，因为它是由封装良好的模块自动呈现的。我不想篡改它。我成功地将 hide-title 类添加到 input 本身，如下所示:

是否可以仅使用此优势来隐藏复选框文本？

以下是我的html:

<td id="result_box__is_duplex--0">
    <div class="checkbox-inline">
        <div class="checkbox">                                        
            <label>
                <input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1"> 
                両面印刷可能 <!-- Hide this text with custom class -->
            </label>
        </div>
    </div>
</td>

并且每个 td 都有一个以 result_box__is_duplex 开头的 id。我相信该模板使用 Bootstrap v3.0。感谢您的关注。

Answer 1

你可以使用 attribute starts with selector - [attr^=value] 以您想要的 td 为目标:

td[id^="result_box__is_duplex"] .checkbox label {
  font-size:0;
}

<table>
<tr>
  <td id="result_box__is_duplex--0">
    <div class="checkbox-inline">
        <div class="checkbox">                                        
            <label>
                <input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1"> 
                両面印刷可能 <!-- Hide this text with custom class -->
            </label>
        </div>
    </div>
</td>
</tr>
</table>