CSS Html make a image appear over options of a radio button ( radio button is hidden by CSS)

Question

I am trying to make an image appear over options of a radio button ( radio button is hidden by CSS) PLs check the following js fiddle

[a link] (https://jsfiddle.net/testingmilan56/rqr4dt8h/)

ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + label {
    background:#fff000;
}

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='checkbox' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>

I also want to control the position of the image .I know its possible to do with z-index ..please help .A slight modification is required .

thanks

I don't see any images in your supplied code? Can you provide us with an example of exactly what you're trying to achieve? — Shaggy, Apr 29 '16 at 09:23
pls goto ipsy dot com and see the quiz .No there is no image yet in my code .i can add image later . — Rafael Milan, Apr 29 '16 at 09:30
what have you tried so far? just providing the css and html doesn't show us how you approached the topic. help is only given to those, that already tried but failed ... — errand, Apr 29 '16 at 09:47

score 0 · Answer 1 · answered Apr 29 '16 at 09:48

Try something like this, but instead of playing with borders, box-shadows and background-colors, use background-images.

.container {
  margin: 32px auto;
}
input {
  display: none;
}
label {
  display: block;
}
input + label:before {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  content: '';
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 1px black;
  margin-right: 0.25em;
  top: .2em;
}

input:checked + label:before {
  border: 2px solid white;
  background: lime;;
}

input[type=radio] + label:before {
  border-radius: 50%;
}

<div class="container">
  <input type="checkbox" id="check-1" name="check-1" />
  <label for="check-1">Label 1</label>
  <input type="checkbox" id="check-2" name="check-2" />
  <label for="check-2">Label 2</label>
  <input type="checkbox" id="check-3" name="check-3" />
  <label for="check-3">Label 3</label>
  <input type="checkbox" id="check-4" name="check-4" />
  <label for="check-4">Label 4</label>
  <input type="checkbox" id="check-5" name="check-5" />
  <label for="check-5">Label 5</label>

  <hr />

  <input type="radio" id="radio-1" name="radio" />
  <label for="radio-1">label 1</label>
  <input type="radio" id="radio-2" name="radio" />
  <label for="radio-2">label 2</label>
  <input type="radio" id="radio-3" name="radio" />
  <label for="radio-3">label 3</label>
  <input type="radio" id="radio-4" name="radio" />
  <label for="radio-4">label 4</label>
  <input type="radio" id="radio-5" name="radio" />
  <label for="radio-5">label 5</label>
</div>

score 0 · Answer 2 · answered Apr 29 '16 at 10:04

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='checkbox' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>

ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
    width: 100px;
    position: relative;
    height: 100px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input + label{
    position: absolute;
    bottom: 0;
}
input + label:before {
    background: #fff000;
    position: absolute;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    bottom: 25px;
    left: 50%;
    display: block;
    content: '';
    text-align: center;
    margin-left: -35px;
}
input:checked + label:before {    
   content: 'TICK';    
}

You can use FontAwesome for tick, instead of image

https://jsfiddle.net/rqr4dt8h/1/

score 0 · Answer 3 · edited May 23 '17 at 11:59

Refer these Link: Link1

    .radio_item {
      display: none !important;
    }
    .label_item {
      opacity: 0.1;
    }
    .radio_item:checked + label {
      opacity: 1;
    }
    label {
      cursor: pointer;
    }

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1">
  <img src="https://i.stack.imgur.com/FSN1q.png">
</label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2">
  <img src="https://i.stack.imgur.com/FSN1q.png">
</label>

CSS Html make a image appear over options of a radio button ( radio button is hidden by CSS)

thanks

3 Answers3