How to hide checkbox title using CSS

Question

As you can see in the image below, the table contents are so long and the last td content is hideous. (Sorry for local language, but trust me, the content is not important.)

What I want is hide checkbox titles using only CSS. It's very hard to not output title 'cause it's rendered automatically by a well-encapsulated module. And I don't want to tamper with it. I was successful to add hide-title class to input itself as follows:

Is it possible to hide checkbox text only using this advantage?

Following is my 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>

and each tdhas an id starting with result_box__is_duplex. I believe the template uses Bootstrap v3.0. Thank you for paying attention.

you could add that class to the parent element and set a `font-size: 0` — Fabrizio Calderan loves trees, Oct 11 '19 at 11:24
All I could was to add `hide-title` class to `input` element. As I said earlier, it's rendered by well-designed module, and it's very hard to modify other than that. I think it's possible to select `label` tag using `:has` selector. But how? — glinda93, Oct 11 '19 at 11:28
Nope. About `:has` selector: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — ReSedano, Oct 11 '19 at 11:31
I've already read that article. And I misunderstood that it was possible to select parent tag using `:has` selector. But it was **NOT**. That article is misleading unless you read it carefully. Oops. — glinda93, Oct 11 '19 at 11:44
you could try [`nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) selector on the td or [attribute starts with](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) selector (if all those tds have ids starting with `result_box__is_duplex--`) — Pete, Oct 11 '19 at 11:48
**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. https://stackoverflow.com/help/how-to-ask — Rob, Oct 11 '19 at 11:58
@Pete I used `td[id^="result_box__is_duplex"] .checkbox label` but it selects nothing. I used this selector in jQuery and it worked! I think it has no effect in `CSS` like `:has` selector. What'd you think? — glinda93, Oct 11 '19 at 12:10
Should work with css: https://jsfiddle.net/k62s5x1r/1. Inspect the label and see if you have other styles overriding — Pete, Oct 11 '19 at 12:12
@Pete Thanks a lot! The selector now works. (I've put css into a wrong file.) What about submitting your answer? I could accept it. Thanks again. — glinda93, Oct 11 '19 at 12:15

score 2 · Accepted Answer · answered Oct 11 '19 at 12:17

You could use an attribute starts with selector - [attr^=value] to target the td you want:

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>

score 1 · Answer 2 · answered Oct 11 '19 at 11:20

1

Are you able to add the .hide-title to the label element and not the input element? You can then use this, but it's still quite hacky.

.hide-title {
    font-size: 0;
}

answered Oct 11 '19 at 11:20

Jenny Cooke

36
5

score 0 · Answer 3 · answered Oct 11 '19 at 12:03

I have a suggestion. Let's change HTML structure a little bit different.

<td id="result_box__is_duplex--0">
    <div class="checkbox-inline">
        <div class="checkbox">   
            <input type="checkbox" name="checkbox" id="checkbox_id" value="value"/>
            <label id="label_id" for="checkbox_id">Text</label>  
        </div>
    </div>
</td>

then you can apply CSS there the way you expect

/***** CSS ******/
label#label_id {
    display: none;
}

score 0 · Answer 4 · answered Oct 11 '19 at 12:22

0

You can try the below code.

<label style="font-size:0"><input type="checkbox" id="check1">Option 1</label>

answered Oct 11 '19 at 12:22

Foram Trada

793
2
13

How to hide checkbox title using CSS

4 Answers4