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
– Fabrizio Calderan, Commented Oct 11, 2019 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
– glinda93, Commented Oct 11, 2019 at 11:28
Nope. About :has selector: stackoverflow.com/questions/1014861/… — ReSedano
– ReSedano, Commented Oct 11, 2019 at 11:31
you could try nth-child selector on the td or attribute starts with selector (if all those tds have ids starting with result_box__is_duplex--) — Pete
– Pete, Commented Oct 11, 2019 at 11:48
Should work with css: jsfiddle.net/k62s5x1r/1. Inspect the label and see if you have other styles overriding — Pete
– Pete, Commented Oct 11, 2019 at 12:12

Pete · Accepted Answer · 2019-10-11 12:17:39Z

2

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>

answered Oct 11, 2019 at 12:17

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jenny Cooke · Accepted Answer · 2019-10-11 11:20:53Z

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, 2019 at 11:20

Jenny Cooke

365 bronze badges

Comments

Dulara Malindu · Accepted Answer · 2019-10-11 12:03:16Z

0

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;
}

answered Oct 11, 2019 at 12:03

Dulara Malindu

1,6375 gold badges20 silver badges38 bronze badges

Comments

Pushprajsinh Chudasama · Accepted Answer · 2019-10-11 12:22:58Z

0

You can try the below code.

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

answered Oct 11, 2019 at 12:22

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to hide checkbox title using CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related