Remove border circle from radio input

Question

I wanted to use image instead of regular radio inputs.

I made it this way:

input[type="radio"]{
    content:url('/images/new-home-page/Checkbox.png');
    height:3vh;
    width:3vh;
}
input[type="radio"]:checked{
    content:url('/images/new-home-page/checkedCheckbox.png');
}

Unfortunately, they have circles around them. I have tried to use border:none or text-decoration:none but it doesnt help. Could someone help me with this please?

They look like this now:

Answer 1

I would request you to use the appearance property of CSS, which is responsible for the components like this. So setting the appearance: none will make a kind of display: none to the component's appearance, which is what is needed for you. You are good to use this bit of CSS to make the component not display, while keeping the element in the view:

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;

Snippet

input {
  content: url('http://i.stack.imgur.com/M3EkO.png');
  height: 16px;
  width: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:checked {
  content: url('http://i.stack.imgur.com/Ialva.png');
}

Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />

Output: http://output.jsbin.com/digebimolu/1

Answer 2

You must hide radio buttons and add more elements like <span> and <label>

Here is how it should work: http://jsfiddle.net/etz9Lfat/