custom checkbox css for a chrome extension

Question

I really want to use a custom checkbox design for my checkboxes inside of my chrome extension but it just doesn't seem to work. My guess is that there is some sort of interference with the background image of the checkbox because all of the css seems to be applied except for the background.

The css code I'm using for the checkboxes is from iCheck:

.icheckbox_flat-blue,
.iradio_flat-blue {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(blue.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat-blue {
    background-position: 0 0;
}
    .icheckbox_flat-blue.checked {
        background-position: -22px 0;
    }
    .icheckbox_flat-blue.disabled {
        background-position: -44px 0;
        cursor: default;
    }
    .icheckbox_flat-blue.checked.disabled {
        background-position: -66px 0;
    }

.iradio_flat-blue {
    background-position: -88px 0;
}
    .iradio_flat-blue.checked {
        background-position: -110px 0;
    }
    .iradio_flat-blue.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat-blue.checked.disabled {
        background-position: -154px 0;
    }

and blue.png looks like this:

enter image description here

On a regular site this html and css works fine but once transferred into a chrome extension it doesn't. Is there something I'm doing wrong? How do I get a custom checkbox design?

Also covered here http://stackoverflow.com/q/3559781/2213940 — Zig Mandel, Apr 08 '15 at 04:19
@ZigMandel We don't know for sure if it is used in a content script. — Xan, Apr 08 '15 at 07:17
Hopefully asker will clarify but it certainly seems like it. Otherwise the background css would work as he says does outside the extension. — Zig Mandel, Apr 08 '15 at 13:31

score -1 · Answer 1 · answered Apr 08 '15 at 03:00

-1

The background-image has to be in quotes:

background: url("blue.png") no-repeat;

answered Apr 08 '15 at 03:00

yaakov

4,568
4
27
51

score -2 · Answer 2 · answered Apr 08 '15 at 03:51

-2

Sorry, I have answered my own question. I still don't honestly know what the problem was but I switched away from using iCheck and decided to create my own code for editing the checkbox.

Sorry for wasting anyones time.

answered Apr 08 '15 at 03:51

Jamie

421
4
17

No. You have not _answered_ the question. – Xan Apr 08 '15 at 07:16

custom checkbox css for a chrome extension

2 Answers2