Illuminate the image upon checking the checkbox, as well as when clicking on the image itself

Issue with Implementation

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
   </label>
</div>

Working Solution

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label </label>
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
</div>

The challenge I'm facing is getting the CSS to function properly when including the image within the label tag. I want the functionality where selecting the image checks the checkbox, but it's proving tricky to achieve.

http://jsfiddle.net/4QV3s/

htmlcsscss-selectors

Answer №1

The reason you are experiencing issues is because when trying to access the image, you overlooked the label. Additionally, it is important to use the + symbol instead of ~ in order to specifically target the following label. If you replace the + with ~ again, you will notice the difference.

.check-with-label:checked + label > .product-add-image-preview {
    border:10px solid yellow;
    padding:0; /* To prevent movement */
}

I have made some updates in this new fiddle. I included a second image for demonstration purposes so that you can see how they operate independently: http://jsfiddle.net/8HJ6p/1/

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

Joomla CSS styling malfunctioning

I've been exploring the creation of an in line menu using Joomla 1.6 and CSS. The issue arises when Joomla removes <span class="dmenu"> from the document before saving, despite having all cleanup options turned off. This led me to try a couple ...

cssjoomlahtml

LFT Etica font showcases digits with varying heights

In the project I am working on, we are required to use the font LFT Etica. However, there is an issue with the height of certain digits when displayed. Specifically, some numbers appear taller than others. Is there a way to make all digits have equal heigh ...

cssfontsfont-feature-settings

What is the method for obtaining the value of the second option in a select input field?

My form contains three select inputs : ... <tr> <td><b><?php echo _getText("service.OD.tbr_title.vollondona");?></b></td> <td> <select id="vollondona" name="vollondona" oncha ...

jqueryhtmldomselect

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

javascriptjquerycssslideshowoverlapping

Can CSS be used to modify the size of the clickable region for links?

I'm currently working on a code block that resembles the following: <p class="cont"> <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a> </p> Additionally, I have some CSS sty ...

htmlcss

Sending JavaScript functions to PHP files via Ajax

My Current Project: I am currently developing a script that provides users with choices and generates new options based on their selections. To achieve this, I have created two scripts - one for the HTML structure of my page and another for fetching serve ...

javascriptphpjqueryhtmlajax

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Using jQuery to retrieve the domain extension from a URL

Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...

javascriptjqueryhtmlurl

PHP: The reasons why isset function may not be functioning as expected

Hello everyone, I am new to PHP and have a very basic question. I have two scenarios in mind: 1. By default, on loading, the page should display "June". 2. If the user clicks the submit button, "Jan" should be displayed. Here is my simple.php file (P ...

phphtml

Rotating elements in CSS using the transform property with rotateX and rotateY values

I've created a transformation effect using CSS, and now I'm looking to start with a specific rotation (rotateX(15deg) rotateY(180deg)) and then animate it back to its original position. Is there a way to achieve this reversal effect and how can i ...

csstransform

Exploring the concept of JavaScript Variablesqueries

I need help understanding why the results are different in these three examples related to JavaScript. Case 1. var x = 5 + 2 + 3; document.getElementById("demo").innerHTML = x; Result: 10 Case 2. var x = 5 + 2 + "3"; document.getElementById("demo").in ...

javascriptjqueryhtml

Error in Angular timer causing NaN result

Struggling to create a timer in JavaScript, a basic one at that. I wrote what I thought was correct code, but it's not functioning properly - resulting in the textbox value changing to NaN after just one second. Below is the code snippet: <timer ...

javascripthtmlangularjsionic-framework

Locating and clicking a button within a table using Selenium WebDriver with Java, along with an event listener

This is my first question on Stack Overflow and I have not made any progress after a day of research. I am currently experimenting with WebDriver in Netbeans for testing our services. We chose WebDriver because we will need to test file uploads in the fut ...

javahtmlseleniumselenium-webdriverwebdriver

When the parent DIV is hovered over, the image and text properties will be altered

Greetings, I am just starting out in web development and would like to seek guidance from the Stack Overflow community. Here is a link to my code: https://codepen.io/noxwon/pen/RwrmxKX My code is very basic and filled with repetitive lines. I have multip ...

jquerycss

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

htmlcss

Ensure chip component (div) dynamically resizes its width to accommodate varying lengths of child text elements

I have a main container with two child elements (a text span and an image svg) created using the Material UI component library. My objective is to dynamically adjust the width of the chip based on the length of the text content inside it, while ensuring a ...

htmlcssreactjsmaterial-uistyled-components

PHP library dompdf is having issues when rendering CSS styles

Trying to convert HTML with CSS styles into a PDF using dompdf. The CSS includes floats as well. Below is the snippet of my CSS and HTML code: $dompdf = new DOMPDF(); //create object //load html with css $dompdf->loadHtml('<html> <head ...

phphtmlcssdompdf

Issue with modal box not displaying properly when hidden div is within a for loop

In my project, I have a MySQL select statement that retrieves all the results to be displayed in an unordered list (<ul>) using a for loop. This functionality works perfectly. However, I wanted to add a "click more" link at the bottom of each result ...

phpmysqlloopshtmlfor-loop

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

Tips on managing multiple form data using ajax for php backend

<input type="text" value="2021-05-01" class="date" name="date"> <input type="text" value="10:00" class="starttime" name="starttime"> ...

phphtmljqueryajax