Conceal all elements within the label tag, leaving only the

Looking to Keep Only the Image Visible Within a Label

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

I've experimented with the :not selector but it's either hiding everything or nothing. Appreciate any assistance on resolving this issue. Thank you for your time.

htmlcsscss-selectors

Answer №1

this particular choice may require some finesse, but it has the potential to be effective

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

Answer №2

To achieve this effect, you can follow these steps. Start by hiding the label along with all its content. Then, adjust the visibility of the image to make it visible. It may not be considered a standard practice to position the image inside the label tag. Instead, consider placing the text within a span tag.

.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="Pay with 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

Given that the img is nested within 

label[for="payment_method_vipps"]
, any styling applied to hide the label will also conceal its content (including the image). Therefore, achieving this with the current HTML structure may not be feasible.

One potential workaround is to set the label text color to 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>

If this approach does not yield the desired result, another option would be to enclose the text ("vipps") in a span element and apply display: none to it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display articles side by side in a two-column layout

I'm facing a dilemma with my social media website project. I need to organize the posts into two columns within a parent container section, using articles styled with float: left. How can I prevent the shorter posts from leaving empty space underneath ...

csshtmlmultiple-columnsarticle

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Currently, I am in the process of learning how to create a basic web form. My goal is to develop an HTML web form that sends a number to PHP and then displays the number in another text field without refreshing the page. After doing some research online, ...

javascriptphphtmlajax

Steps to set a background image for an entire page in VueJS

I recently downloaded a Background Image to add to the Home Page of my VueJS application. Unfortunately, when the page loads, only a portion of the page is covered by the image. My goal is to have the entire page filled with the image, except for the Navba ...

cssvue.js

The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated! Check out the fiddle here ...

css

Instructions on how to make the image within this div expand to full screen in order to cover up the blue background color

I created a div and set its background image, but the image is not covering the full screen. There's some space around it. The blue color is the body color. Please refer to the image here I am very new to web development, so please forgive my silly ...

htmlcss

Issue with Chrome Browser Border Radius Bug when applied to element with Display: Table

I'm facing an issue with border radius in the Chrome browser. When applying a border-radius to an element styled with dashed border-style and display:table, the background-color exceeds the limit of the border. Here's how it appears in Chrome: ...

css

Python: HTML regex not finding a match

This is the code snippet I am struggling with: reg = re.search('<div class="col result_name">(.*)</div>', html) print 'Value is', reg.group() The variable 'html' holds content like this: <div class="c ...

pythonhtmlregex

Adjusting my menu layout causes my header image to be partially covered

I've been trying to make my menu fixed at the top of my website, but it keeps overlapping into my header image and doesn't look right. I've experimented with different solutions, but nothing seems to work. Here's the CSS code I used th ...

htmlcsswordpressmenufixed

Ways to make a chosen row stand out in an *ngFor loop?

Struggling to find a solution within Angular2 for setting a css class when selecting a row. I want to achieve this without relying on jQuery. <table class="table table-bordered table-condensed table-hover"> <thead> <tr> ...

csstwitter-bootstrapangularhtml-table

Expanding Submenu Width

Currently working on developing a Dynamic Sub-menu for Wordpress, similar to the one shown here: . However, I am facing an issue with the width as it is set to 'auto' but not aligning the sub-menu properly. I would like the sub-menus to float lef ...

javascriptcsswordpress

When using PHP submit, the text input from dynamically generated JS fields is not being posted

My HTML form includes a table of text inputs that I intend to use for generating an SQL INSERT query. The issue I am facing is that my manually inputted table has 5 text inputs, with the option for users to add more. The additional input fields are being c ...

javascriptphphtmlforms

Exploring the differences between translate3d and matrix in CSS 3 animations

Lately, my projects have demanded seamless transitions and animations. We've made the shift from using Javascript to CSS animations almost entirely. I've discovered that utilizing translate3d produces incredibly smooth animations on various devi ...

csscss-animationscss-transformstranslate3d

AngularJS causing issues with page redirection functionality

Incorporating angularjs routing into my web app has been a big task. I've set up the $locationProvider and included the base tag in the HTML head as <base href="/webapp/"> to get rid of the hash symbol in the URL. It's been smooth sailing w ...

javascripthtmlangularjs

Using AJAX and PHP to submit a form and receive a success response text without the need to reload the page

Greetings, fellow coders! I'm excited to be posting my first question here. As a beginner in the coding world, I've already made some progress thanks to the helpful answers I've found on this platform! Today, I am encountering an issue with ...

phphtmljqueryajaxforms

Rotating Images with jQuery using the 'jQueryRotate' extension

Trying to create a hover effect where one div triggers the rotation of an image in another div. Experimenting with the jQueryRotate plugin found at http://code.google.com/p/jqueryrotate/ Check out my code on jsFiddle. The green square is rotating with CS ...

javascriptjqueryhtmlanimationplugins

Tips for altering the color of the email text as it is being typed into the input field

Is it possible to customize the text color while typing email in an input field? <form action=""> <input type="email" name="mail" id="" placeholder="Your Email"& ...

htmlcssforms

What is the best way to switch the background color of a dropdown div when hovering over it?

I've been working on getting the color to fill the entire dropdown area based on the text you're hovering over, but it's only filling the space around the word. I've set up a Fiddle to demonstrate the issue I'm facing. I'm ne ...

htmlcsshover

Instead of relying on jQuery for styling, opt for CSS for a more

I came across this particular piece of code: $("#customTable tr:nth-child(odd)").addClass("newColour"); It's purpose is to apply a new color to every odd row in the table. Is there a way to achieve this using CSS alone, without relying on jQuery f ...

jquerycss

When you drag down on mobile Safari on an iPad, touch events may cease to fire in HTML5

When I implement event listeners to handle touch events like touchmove and touchstart document.addEventListener("touchstart", function(event){ event.preventDefault(); document.getElementById("fpsCounter").innerHTML = "Touch ...

javascriptipadhtmlios5webkit