CODEWITHSUNDEEP
htmlcss
Moelbeck
Moelbeck

Reputation: 640

Radio Button multiple background image on select

Is it possible to have multiple background images on my radio button? As a standard, my radio buttons will have an image, of some sort, and on select, it should add a check mark next to the image. But now, it replaces the image with the checkmark.

The reason for that, is that I set the background image on select:

.toolbar-chartType input[type="radio"]:checked + label  {
    background-image:url(' ../../../../Content/images/checkmark.png') !important;
    background-repeat: no-repeat;
    background-position-x: 0;
}

, which replaces the previous image. I have made a jsfiddle

jsfiddle

Upvotes: 0

Views: 193

Answers (1)

John Stimac
John Stimac

Reputation: 5491

Edit: after seeing a new comment on the initial question, you may wish to skip down to the second code chunk, this first solution will not work if the images on the labels are different.

Yes. CSS3 supports giving one element multiple background images. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

.toolbar-chartType input[type="radio"]:checked + label  {
    background-image: url(' http://mymasap.org/wp-content/uploads/2013/05/checkmark1.png'), url('http://www.nextgenupdate.com/forums/images/smilies/wat.png') !important;
    background-repeat: no-repeat;
    background-position-x: 0;
}

Support for this feature isn't full however, so if you need support in older browsers you will need to find a different solution.

You could try having two separate elements on top of each other, each with their own background, or you could make an image that in a compilation of the two backgrounds and simply assign that as the background image.

Again, for modern borwsers, you can use the CSS ::before pseudo element to achieve this effect. Instead of styling the label, style its ::before. (http://jsfiddle.net/mVNLV/1/)

.toolbar-chartType input[type="radio"]:checked + label::before  {
    content:"";
    width:20px;
    height:15px;
    background-image:url(' http://mymasap.org/wp-content/uploads/2013/05/checkmark1.png') !important;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:-58px;
}

Again, support varies.

For the most widely supported solution, you'll need to add another element, however both of these solutions will work in newer browsers.

Upvotes: 1

Related Questions