Radio button with custom image

Question

I\'ve used this example for checkboxes but then later I realized I need one for the radio buttons.

Can someone please customize this example for radio buttons?

Answer 1

Use Pseudo-elements in this case i am using ::before (:before)

Update: since firefox doesn't support pseudo-elements on inputs yet, use the adjacent sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked + [for^=radio]:before{
    background: green
}

Or the General sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[id=radio-1]:checked ~ [for=radio-1]:before,
[id=radio-2]:checked ~ [for=radio-2]:before,
[id=radio-3]:checked ~ [for=radio-3]:before{
    background: green
}

The basic

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

multiple inputs

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}