Como puede ver en la imagen a continuación, el contenido de la tabla es muy largo y el último contenido de td es horrible. (Perdón por el idioma local, pero confía en mí, el contenido no es importante).

the last td is hideous

Lo que quiero es ocultar los títulos de las casillas de verificación utilizando solo CSS. Es muy difícil no mostrar el título porque se procesa automáticamente por un módulo bien encapsulado. Y no quiero manipularlo. Tuve éxito al agregar la clase hide-title a input de la siguiente manera:

input has hide-title class

¿Es posible ocultar el texto de la casilla de verificación solo con esta ventaja?

El siguiente es mi 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>

Y cada td tiene una identificación que comienza con result_box__is_duplex. Creo que la plantilla usa Bootstrap v3.0. Gracias por prestar atención

0
bravemaster 11 oct. 2019 a las 14:00

4 respuestas

La mejor respuesta

Podría usar un el atributo comienza con el selector - {{X0 }} para apuntar al td que deseas:

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>
2
Pete 11 oct. 2019 a las 12:17

¿Puede agregar el título .hide al elemento de etiqueta y no al elemento de entrada? Luego puede usar esto, pero sigue siendo bastante hacky.

.hide-title {
    font-size: 0;
}
1
Jenny Cooke 11 oct. 2019 a las 11:20

Tengo una sugerencia. Cambiemos la estructura HTML un poco diferente.

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

Entonces puedes aplicar CSS allí como esperas

/***** CSS ******/
label#label_id {
    display: none;
}
0
Dulara Malindu 11 oct. 2019 a las 12:03

Puedes probar el siguiente código.

<label style="font-size:0"><input type="checkbox" id="check1">Option 1</label>
0
Foram Trada 11 oct. 2019 a las 12:22