Styling Custom Checkbox with Image Not Appearing - html

Question

I'm trying out HTML and CSS and am relatively new to the entire concept. I'm currently working on styling a custom checkbox using an image I made from Photoshop. I am not able to figure out why my image is not appearing when I set it this way.
HTML
<ul id="myUL" class="ulChecklist">
<form action="/action_page.php">
<li><input type="checkbox" name="instruction">
<label for="Step1">Step 1</label>
</li>
<li><input type="checkbox" name="instruction">
<label for="Step2">Step 2</label>
</li>
<li><input type="checkbox" name="instruction">
<label for="Step3">Step 3</label>
</li>
</form>
</ul>
CSS
input[type="checkbox"] {
opacity: 0;
}
input[type="checkbox"] + label {
background: url(check.png) left center no-repeat;
}
This is the pre-checked image I want to add.
This is the post-checked image I want to add.
As you can see, it isn't appearing.
Is something wrong with the way I write these codes? I've checked the following Lynda course link: https://www.lynda.com/HTML-tutorials/Styling-radio-buttons-check-boxes-images/612196/646907-4.html
But it isn't working out for me. I would greatly appreciate help from people! Thank you for taking your time to answer a noob's question!

Answer 1

Try this.
ul{
list-style:none;
}
input[type="checkbox"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
input[type="checkbox"] + label {
background: url(https://i.stack.imgur.com/eiFBl.png) no-repeat 0 center;
padding-left:60px;
line-height:50px;
display: inline-block;
cursor:pointer;
}
input[type="checkbox"]:checked + label {
background: url(https://i.stack.imgur.com/mCst2.png) no-repeat 0 center;
}
.check-wrap{
position:relative;
display: inline-block;
}
<ul id="myUL" class="ulChecklist">
<form action="/action_page.php">
<li>
<div class="check-wrap">
<input type="checkbox" name="instruction" id="Step1">
<label for="Step1">Step 1</label>
</div>
</li>
<li>
<div class="check-wrap">
<input type="checkbox" name="instruction" id="Step2">
<label for="Step2">Step 2</label>
</div>
</li>
<li>
<div class="check-wrap">
<input type="checkbox" name="instruction" id="Step3">
<label for="Step3">Step 3</label>
</div>
</li>
</form>
</ul>

Answer 2

You are on the right path. Just that you need to resize the background image and float it to the left. And one of the most important part is to associate the label with the input checkbox with for and id:
input[type="checkbox"] {
opacity: 0;
}
input[type="checkbox"] + label {
background: url(http://www.iconarchive.com/download/i86039/graphicloads/100-flat-2/check-1.ico) left center no-repeat;
float: left;
padding-left: 25px; /*image width plus extra padding */
background-size: 20px 20px;
}
input[type="checkbox"]:checked + label {
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/2181-200.png) left center no-repeat;
float: left;
padding-left: 25px; /*image width plus extra padding */
background-size: 20px 20px;
}
<ul id="myUL" class="ulChecklist">
<form action="/action_page.php">
<li><input id="Step1" type="checkbox" name="instruction">
<label for="Step1">Step 1</label>
</li>
<li><input id="Step2" type="checkbox" name="instruction">
<label for="Step2">Step 2</label>
</li>
<li><input id="Step3" type="checkbox" name="instruction">
<label for="Step3">Step 3</label>
</li>
</form>
</ul>

Answer 3

The code you have provided makes no provision for the background label image when the adjacent sibling pseudo-state is :checked.
You'll need to account for both states, e.g: input[type="checkbox"] & input[type="checkbox"]:checked
input[type="checkbox"] + label {
background: url(check.png) left center no-repeat;
}
input[type="checkbox"]:checked + label {
background: url(check-alt.png) left center no-repeat;
}
Edit
You may also need to declare background size properties.

Answer 4

Sorry I am not able to view the Lynda course as I am not a member, but will do my best to answer this.
If I were setting up I would make the following changes to your code:
<ul id="myUL" class="ulChecklist">
<form action="/action_page.php">
<li><input type="checkbox" name="instruction">
<label for="Step1">Step 1</label>
<img src=“./check.png” class=“checkmark-section”>
</li>
</form>
</ul>
Then in the CSS I would callout the checkmark-section class and add in the click effect image under the pseudo class of focus < This is the css word for clicked.
For example:
.checkmark-section:focus {
background: url(./checkmark-active)
}
This will mean that once checkmark-active is clicked, it will swap over to show the depressed check mark image instead. I have not tried this out, but that is how I would expect it to work.
All the best,
Dan