JQueryMobile - Replace checkbox tick with an image - Full CSS

Question

I would like to replace the checkbox with an image only with CSS. You can see what I would like to achieve on this picture below:

http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2013/03/3.1InActivitySettings-220x376.png

I'm nearly there but I'm stuck. You can find what I've done so far here: JSFiddle

HTML

<div data-role="content" class="content">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-iconpos="right">
            <input type="checkbox" name="checkbox-0" id="checkbox-0" class="check" />
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="check" />
            <input type="checkbox" name="checkbox-2" id="checkbox-2" class="check" />
            <input type="checkbox" name="checkbox-3" id="checkbox-3" class="check" />
            <label for="checkbox-0">15 minutes</label>
            <label for="checkbox-1">30 minutes</label>
            <label for="checkbox-2">45 minutes</label>
            <label for="checkbox-3">60 minutes</label>
        </fieldset>
    </div>
</div>

CSS

.ui-checkbox-on {
    background-image: url(images/checkmark.png);
}

.ui-checkbox-on .ui-icon {
    background-color: rgba(0, 0, 0, 0);
}

.ui-icon-checkbox-off {
    background-image: none;
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 
    border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
    background-color: rgba(0, 0, 0, 0);
}

possible duplicate of Change checkbox check image to custom image — Amir Ali Akbari
– Amir Ali Akbari, Commented Dec 16, 2013 at 5:37

TheEwook · Accepted Answer · 2015-03-09 17:27:39Z

6

This CSS does the trick.

DEMO

.ui-checkbox-on .ui-icon {
    width: 32px!important; 
    height: 32px!important; 
    margin-left: -20px !important; 
    margin-top: -15px !important; 
    box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; 
    -webkit-border-radius: 0 !important; border-radius: 0 !important; 
    background: url(images/checkmark.png) 50% 50% no-repeat;
}

.ui-icon-checkbox-off {
    background-image: none;
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 
    border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
    background-color: rgba(0, 0, 0, 0);
}

edited Mar 9, 2015 at 17:27

answered Aug 31, 2013 at 16:37

TheEwook

11.2k6 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQueryMobile - Replace checkbox tick with an image - Full CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related