nosaxa nosaxa - 1 year ago 45
HTML Question

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

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

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>