Скрыть все внутри ярлыка, кроме img

Question

Я хочу скрыть все внутри метки, кроме изображения.

.payment_method_vipps label :not(img){
	display: none!important;
}

<li class="wc_payment_method payment_method_vipps">
<input id="payment_method_vipps" type="radio" class="input-radio" name="payment_method" value="vipps" data-order_button_text="Betal med Vipps">
	<label for="payment_method_vipps">
			vipps
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="Vipps" style="width: 100px; height: auto;">
	</label>
<div class="payment_box payment_method_vipps" style="display: block;">
</div>
</li>

Я уже пытался использовать селектор :not, но он скрывает либо все, либо ничего. Спасибо за ваше время и помощь.

Answer 1

Поскольку img является дочерним для label[for="payment_method_vipps"], все, что скрывает метку, также будет скрывать ее содержимое (то есть изображение). Так что, вероятно, это будет невозможно с этой структурой HTML.

Единственное, что вы можете попробовать, это установить цвет метки (текста) на transparent:

label[for="payment_method_vipps"] {
  color: transparent;
}

<li class="wc_payment_method payment_method_vipps">
  <input id="payment_method_vipps" type="radio" class="input-radio" name="payment_method" value="vipps" data-order_button_text="Betal med Vipps">
  <label for="payment_method_vipps">
			vipps
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="Vipps" style="width: 100px; height: auto;">
	</label>
  <div class="payment_box payment_method_vipps" style="display: block;">
  </div>
</li>

Если по какой-то причине это не сработает, вам придется заключить текст («vipps») в span, к которому вы можетеприменить display: none.

Answer 2

Вы могли бы сделать это так. Сначала скройте ярлык и все его содержимое. Затем установите visibility изображения на visible. Возможно, не рекомендуется размещать img внутри тега label. Вы можете вложить текст в тег span.

.payment_method_vipps label{
    visibility: hidden;
}

.payment_method_vipps label img{
    visibility: visible;
}

<li class="wc_payment_method payment_method_vipps">
<input id="payment_method_vipps" type="radio" class="input-radio" name="payment_method" value="vipps" data-order_button_text="Betal med Vipps">
	<label for="payment_method_vipps">
			vipps
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="Vipps" style="width: 100px; height: auto;">
	</label>
<div class="payment_box payment_method_vipps" style="display: block;">
</div>
</li>

Answer 3

эта опция немного хитрая, но может работать

label[for=payment_method_vipps] {font-size:0;}