Is it possible to customize with pure css radio button input without label?

Question

<input id="whateveryoulike" class="whateveryoulike" name="test" type="radio" checked="checked">
<input id="whateveryoulike2" class="whateveryoulike2" name="test2" type="radio">

Is this possible to customize this two elements without targeting the label of each one of them and using only css(with html and imgs)?

Answer 1

try this one

input[type=radio]:not(old) {
width: 23px;
height: 23px;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 1em;
border: 2px solid #01a982;
outline: none !important;}

 input[type=radio]:not(old):checked{
background-image: radial-gradient(circle at center, #fff, #fff 37.5%, #01a982 40%, #01a982 100%);
outline: none;}

Answer 2

You may style it this way:

input[type='radio'] {
  background: none;
  opacity: 0;
}
.checkbox_outer {
  position: relative;
  float: left;
  margin-right: 5px;
}
input[type='radio'] + span {
  position: absolute; top:0; left:0; right:0; bottom:0; background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat;}
  input[type='radio'], .checkbox_outer {
    height: 16px;
    width: 16px;
    position: relative;
    z-index: 10;
  }
  /*Radiobutton*/
  input[type='radio']+span {
    background-position: -32px 0;
  }
  input[type='radio']:checked + span {
    background-position: -48px 0;
  }
  input[type='radio']:hover:checked + span,
  input[type='radio']:focus:checked + span {
    background-position: -48px -16px;
  }
  input[type='radio']:hover + span,
  input[type='radio']:focus + span {
    background-position: -32px -16px;
  }
  input[type='radio']:disabled + span {
    background-position: -32px -32px;
  }
  input[type='radio']:disabled:checked + span {
    background-position: -48px -32px;
  }
  input[type='radio']:hover:disabled + span,
  input[type='radio']:focus:disabled + span {
    background-position: -32px -32px;
  }
  input[type='radio']:hover:disabled:checked + span,
  input[type='radio']:focus:disabled:checked + span {
    background-position: -48px -32px;
  }
  input[type='radio']:active + span {
    background-position: -32px -48px;
  }
  input[type='radio']:active:checked + span {
    background-position: -48px -48px;
  }

<strong>Radio buttons </strong>
<br />
<div class="checkbox_outer">
  <input id="ID5" type="radio" name="NAME5" checked><span></span>
</div>Checked
<br />
<div class="checkbox_outer">
  <input id="ID5" type="radio" name="NAME5"><span></span>
</div>Not checked
<br />
<div class="checkbox_outer">
  <input id="ID6" type="radio" name="NAME6" checked disabled><span> </span>
</div>Checked & disabled
<br />
<div class="checkbox_outer">
  <input id="ID6" type="radio" name="NAME6" disabled><span></span>
</div>Not checked & disabled
<br />

Use labels, its makes styling & customization easy.

check this

image for radio

custom radios

Answer 3

I tried to use input[type=radio]::after, but it doesn't seem to work. But here's a nice little trick that works in all modern browsers:

Put a <span> after every radio button, with no whitespace between. This span is above the input, but the input is still clickable because of pointer-events: none (this is not supported in older IE Versions).

Now you can style the buttons however you want:

span.customRadio {
    display: none;
}

input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: default;
}

input[type="radio"] + span.customRadio {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: white;
    margin: 0 0 0 -16px;
    border-radius: 50%;
    box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
input[type="radio"] + span.customRadio::after {
    content: '.';
    color: transparent;
    position: absolute;
    display: block;
    width: 2px;
    height: 2px;
    margin: 7px 0 0 7px;
    opacity: 0.6;
    border-radius: 50%;
    transition: .2s;
}
input[type="radio"]:checked + span.customRadio::after {
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    opacity: 1;
    background-color: #3388ff;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

<input name="test" type="radio" checked="checked"><span class="customRadio"></span>
<input name="test2" type="radio"><span class="customRadio"></span><br><br>

In action:<br>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

JSFiddle