Photoshop Question posted in
The official user guide can be found here.

Styling Custom Checkbox with Image Not Appearing – Photoshop

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.
Check Image I want to add

This is the post-checked image I want to add.
This is the post-checked image I want to add.

As you can see, it isn’t appearing.
enter image description here

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!

Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search