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

Answer 1

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> 

Answer 2

<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/

Answer 3

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="http://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="http://i.stack.imgur.com/FSN1q.png"> </label>