Radio button background only with CSS?

Question

What I need to do is to replace the look of the radio button with image. That can be easily achieved with jQuery, but it this case I need to do it with CSS only. Is there any way to do that? Here is my HTML:

<div class="radio-buttons">
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="cheetah" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="horse" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="lion" value="" />
    </div>
</div>

I've tried to apply a style background-image: on the radio button, but of course it didn't work. Then I added the <span>'s and I am wonderig if I can set style to the buttons display: none , and somehow on input:checked to display the <span> which will be styled with background-image: ? Is this the right way or I am on completely wrong direction? And can it be achieved with CSS only at all ?

Edit: the radio buttons might be changed to checkboxes if needed.

Solution 1

As Dominik said that is almost the way to achieve this. May be his code is for a specific case, and I found something similar but much simple than that. I had to make list of photos, and on click of a photo, it must display the clicked photo, but larger and in section after the list. That's why it didn't work with me. But I will first explain everything and then I will paste my code.

The Dominic code will work only if the label is next to the radio-button. It didn't work for me because I have my <label>'s separated from the radio-buttons. Labels are in <ul> and the radio-buttons are in <div> after the <ul>. That way it doesn't work and that's why I needed to add another same <label> next to each radio-button. Now I had two labels for 1 radio button. So here is my entire code. I had styled the ul labels inline just to save some space in the css. I made it with bg-color so if someone want to try ... it works fine with bg-image too

HTML:

<div class="shell">
    <form>
        <ul>
            <li><label class="label" for="cheetah" style="background-color: white"></label></li>
            <li><label class="label" for="horse" style="background-color: yellow"></label></li>
            <li><label class="label" for="lion" style="background-color: green"></label></li>
            <li><label class="label" for="squirrel" style="background-color: red"></label></li>
            <li><label class="label" for="tiger" style="background-color: purple"></label></li>
            <li><label class="label" for="bear" style="background-color: black"></label></li>
        </ul>

        <div class="radio-buttons">
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="cheetah" value="" />
                <label class="label" for="cheetah" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="horse" value="" />
                <label class="label" for="horse" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="lion" value="" />
                <label class="label" for="lion" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="squirrel" value="" />
                <label class="label" for="squirrel"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="tiger" value="" />
                <label class="label" for="tiger"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="bear" value="" />
                <label class="label" for="bear" ></label>
            </div>
        </div>
    </form>
</div>

CSS:

*{ margin: 0; padding: 0; }

.shell { width: 1000px; margin: 0 auto; }

ul { height: 150px; list-style: none; padding-bottom: 50px;  }

ul li {
    float: left; 
    border: 1px solid #666;
    margin-right: 14px; 
} 
ul li label {
    display: block; 
    width: 150px;
    height: 150px;
    cursor: pointer;
}

ul label {
    display: inline;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]:checked + label.label {
    border: 1px  solid red;
    background-repeat: no-repeat;
    display: inline-block;
    height: 500px;
    width: 500px;
}
input[type="radio"]:checked + label[for="cheetah"] {
    background-color: white
}
input[type="radio"]:checked + label[for="horse"] {
    background-color: yellow
}
input[type="radio"]:checked + label[for="lion"] {
    background-color: green
}
input[type="radio"]:checked + label[for="squirrel"] {
    background-color: blue
}
input[type="radio"]:checked + label[for="tiger"] {
    background-color: purple
}
input[type="radio"]:checked + label[for="bear"] {
    background-color: black
}

Solution 2

Block-level HTML elements have a few restrictions:

They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.

Solution 3

As described in the Link I provided in the comment, you can use the following html:

<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />

together with the css similar to:

.regular-radio {
display: none;
}

.regular-radio + label {
-webkit-appearance: none;
background-image: url("unchecked.png");
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}

.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background-image: url("checked.png");
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}

.regular-radio:checked + label {
background-image: url("checked.png");
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

Comments

[Панайот Толев]

Yes, it should be worked in this direction. I have posted the solution I got with the changes and for my particular case.