J'ai un morceau de HTML qui ressemble à,
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
"-"
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
qui rend bien.
Est-il possible de supprimer le "-" avec l'utilisation de CSS? Je ne sais pas comment faire cela.
J'ai essayé display: none; sur l'élément , mais aucun contenu à l'intérieur de l'élément get s'affiche.
6 Réponses :
Vous ne pouvez pas supprimer "-" en utilisant CSS car il n'appartient à aucun élément seul. À l'intérieur de l'étiquette {dans laquelle elle réside actuellement}, il y a beaucoup plus d'éléments qui sont tous affectés par le css.
Mettez le "-" dans un span
<span class="removeThis">"-"</span>
.removeThis
{
display:none;
}
or
label > .removeThis
{
display:none;
}
Je pense qu'il ne veut rien changer dans le html, parce que s'il le fait, pourquoi ne pas simplement supprimer "-" entièrement, à quoi ça sert?
CSS cible l'élément entier ou ses éléments enfants. Je ne pense pas qu'il y ait d'autre moyen de faire cela. CSS est pour le style et non pour l'édition de contenu.
Vous ne pouvez pas vraiment le supprimer, mais vous pouvez le masquer. Si vous le colorez de la même manière que l'arrière-plan et que vous déplacez légèrement le proice vers la gauche, il devrait avoir l'air d'avoir été supprimé.
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
"-"
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
label{
color: #FFFFFF; /* make all label text white, hiding everything, including the dash */
}
label>*{
color: #000000; /* revealing all elements except the dash */
}
label .price{
margin-left: -20px; /* move the price slightly to the left, to accomodate for the hidden dash */
}
Utilisez font-size: 0px avec label comme ci-dessous
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
"-"
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
label {
font-size: 0;
}
label>* {
font-size: 16px;
}
label del{
text-decoration:none;
}
Cela semble aller quelque part! Merci. Néanmoins, j'ai besoin que le # contenu span non pertinent soit affiché (je pensais que ce n'était pas pertinent pour la question, mon mauvais). Savez-vous comment ajuster votre code pour qu'il l'affiche? Si oui, avez-vous besoin de connaître le code HTML du contenu non pertinent?
Voulez-vous afficher le '# contenu de span non pertinent' sans ligne directe?
Oui, pas de ligne
@LucSpan Vérifier la réponse mise à jour
Vous ne pouvez pas le supprimer, mais vous pouvez le pirater, si vous pouvez l'envelopper dans un intervalle, alors c'est simple voir la deuxième partie, ou la solution de piratage change la taille de la police à 0 puis restaure la taille de la police pour tout le reste. p>
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
<span class="hide">"-"</span>
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
"-"
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
label {
display: block;
font-size: 0;
}
label * {
font-size: 15px;
}
label .hide {
display: none;
}
Je pense que vous devriez lire les commentaires et autres réponses avant de répondre
@JoykalInfotech si vous dites que ma réponse est une combinaison d'autres réponses publiées dans 1 minute avant moi, alors désolé de ne pas vérifier de manière compulsive si quelqu'un a répondu avant moi
Non pas que vos réponses soient combinées mais vous n'avez pas bien compris le problème, comme d'autres
vous ne pouvez pas gérer le "-" seul car il n'est pas seul entouré d'une balise html. Vous pouvez peut-être le cacher visuellement avec une couleur assortie avec un arrière-plan ou d'autres astuces. Mais ensuite, vous devez à nouveau appliquer le css inversé aux éléments frères comme span, input, etc.
Vous pouvez en mettant le - dans un intervalle et ajouter ce css!
J'espère que cela vous aidera !!
<label for="offeringID_0">
<input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
<span class="product-name">
This product: JSDA JD6500
</span>
<span>"-"</span>
<span class="price">
<del>
<span class="woocommerce-Price-amount amount">
# irrelevant span content
</span>
</del>
</span>
</label>
span:nth-of-type(2) {
display: none;
}
Ce n'est pas ce qu'il peut changer, il cherche une alternative.
Qui a ajouté "-" dans le code?
vous pouvez définir la couleur pour étiqueter et s'étendre différemment pour obtenir une solution, mais il n'est pas possible de supprimer le code à l'aide de CSS
@Hkachhia, le développeur de ce plug-in WooCommerce.