CODEWITHSUNDEEP
htmlcssradio-button
user3392725
user3392725

Reputation: 65

Radio buttons change CSS background-color or background-image (simple code without labels)

Is there a way to only by using css change the appearance of radio buttons. But, simple input radio, not with the labels css adjustment.

Like, here is my code: FIDDLE

<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">

Then, here is my css:

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

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

Therefore, is there I way how to easy do it. Because, I would like to put images instead of simple radio buttons.

Upvotes: 0

Views: 7622

Answers (1)

jsea
jsea

Reputation: 4057

With the experimental pointer-events property, it is possible. Although, I highly recommend the (proper) use of labels to increase accessibility for your website. Labels would also allow for a wider range of browser compatibility. Also, since it's an experimental property, I'm not sure of its future existence or support.

JSFiddle

List of support for pointer-events

CSS Code:

input[type=radio]:before {
    display: block;
    width: 19px;
    height: 19px;
    content: '';
    position: absolute;
    background-image: url(http://placekitten.com/19/19);
    pointer-events: none;
}

input[type=radio]:checked:before {
    background-image: url(http://placekitten.com/25/25);
}

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

Upvotes: 1

Related Questions