0

I've a form that's roughly like this -

<form action="#">
  <ul class="task-type-options">
    <li class="task-type-item">
      <label for="name-type"><input type="radio" name="task-type">
        <i class="radio-button"></i>
        Thing1 -
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
      </label>
    </li>
    <li class="task-type-item">
      <label for="name-type"><input type="radio" name="task-type">
        <i class="radio-button"></i>
        Thing2 -
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
      </label>
    </li>
  </ul>
</form>

What I want is for the input[type="radio"] to be replaced by the <i> and when checked, change the background-position of the <i> element. Here's my CSS

    .task-type-item {
      width: 100%;
      list-style: none;
    }
    .task-type-item input[type="radio"] {
      display: none;
    }
    .task-type-item i {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAARCAMAAABHG2QlAAAAaVBMVEUAAADLycnLycnMysrMysrNy8vMysrMysrNy8vOzMzMysrMysrOzMzOzMzW1dRBo7VPqbqZy9Oay9Sby9Sv1dvLycnL29vL4eTMysrOzMzW1dTb29vm5eTq6ejq7+/v7u3w7+7y8fD19PPhisAsAAAAD3RSTlMAEB9oeZKmudDV9fb4+fmSK74iAAAA6klEQVQoU52T2RKDIAxFEa244NaKjYqi/v9HNhFLtTN9KPdF5syJIYKMYYIozVSWRgE7woUEBVLwnyDMS21Wo8s8tCCGYaQMEDuwGw7cimmzmYobgaQf3+kTC5xhQVgs2ztLgZ3iTwkWxQROBoEgn7ZPpjzgsMvto92fwDmQMSOYyQDOonI7p4wEzdLVVVXVHc0kxID8uYMnrgbBUn2p0amkt5OBDi2lRGM+AHbSkmXmUmMy2lpb2dD2ANBwAA1gar3UrEqhdz+UBteKDAfI8OrjM4/Pd/t5Ps33+TTufHzugdd987rXf/8/L4tZRR+ZOT5PAAAAAElFTkSuQmCC");
      background-repeat: no-repeat;
      display: block;
      height: 17px;
      margin: 0 8px 0 0;
      width: 17px;
    }
    .task-type-item:hover i {
      background-position: -17px 0;
    }
    .task-type-item input:checked ~ i {
      background-position: -34px 0;
    }

    i {
      display: block;
    }

    label {
      display: block;
    }

I know this line

.task-type-item input:checked ~ i {
  background-position: -34px 0;
}

isn't correct but what I want to do is change the <i> when the input is 'checked' and can't work out where I'm going wrong. I've tried > and + and can't get them working either.

I don't really want to rely on jQuery/JavaScript for this, except for OldIE.

2
  • Does the selector apply when you remove the ~ i? For example: .task-type-item input:checked { background-color: red; }
    – Andy
    Jan 20, 2014 at 15:24
  • Hi Andy, no it doesn't. This could mean I've structured the HTML incorrectly for the technique to work, hmm. Thanks :) Jan 20, 2014 at 15:26

1 Answer 1

0

There's one problem here: because your checkboxes are display:none you're actually not able to click and check them. You're hovering and clicking on the i item, that's why your CSS is not working. You might have to rely on javascript for this.

EDIT: Forget the above. Couple of things are wrong in your code: The for attribute of the tag should be equal to the id attribute of the related element to bind them together. Or don't use id at all, since the target radio is enclosed on it's own label: http://www.w3schools.com/tags/tag_label.asp

Second: the selector should be .task-type-item input:checked ~ i

check working solution here: http://codepen.io/lucianodinapoli/pen/vwqKH

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.