Styling Custom Checkbox with Image Not Appearing

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!

first of all your html is invalid. and second.. could you show your folder structure with the files? — Huelfe, Nov 15 '17 at 08:25

score 5 · Accepted Answer · answered Nov 15 '17 at 08:33

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>

Thank you, this works beautifully. I also figured out the problem I had, apparently even though the image was in the same folder, URL would not accept a name like 'check.png' solely. I am not sure what gave me that idea that it would work. — MechaKondor, Nov 15 '17 at 09:03

score 0 · Answer 2 · answered Nov 15 '17 at 08:40

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>

score 0 · Answer 3 · answered Nov 15 '17 at 08:40

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.

score -1 · Answer 4 · answered Nov 15 '17 at 08:40

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

Styling Custom Checkbox with Image Not Appearing

4 Answers4