xPages checkbox styling background image

Question

How do I change checkbox style? I need especially to replace checked checkbox background/image..

Here is my xPage code:

<xp:this.resources>
    <xp:styleSheet href="/myCSS.css"></xp:styleSheet>
</xp:this.resources>
<xp:checkBox text="Label" id="checkBox1" styleClass="mycheckbox">/xp:checkBox>

and here is CSS:

.mycheckbox:checked {
         background-color: green;
         box-shadow:0px 0px 0px 2px black inset;
         margin-bottom:2px;}

The problem is that when checkbox is checked it sets only border but not background color green. Same if I try to set and image for checked one.

[this](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) might help — Venugopal, Jan 21 '16 at 17:34
Please use the search function before making a new question, there are a lot of topics about this. — Stefan Neuenschwander, Jan 21 '16 at 17:51
Well, it doesn't work on xPages app. I do want to keep current oneUI style for checkbox but for checked one I want to set my own style — VladP, Jan 21 '16 at 18:19

score 2 · Accepted Answer · answered Jan 21 '16 at 23:32

You can't set a background color for checked checkbox. Even !important doesn't help.

You can workaround with JavaScript (toggle class on change event) or advanced CSS though.

With CSS, you can hide browser's default checkbox and replace it by a picture or "constructed" checkbox.

The following example is an adaption of the blog Creating Custom Form Checkboxes and Radio Buttons with Just CSS!

XPage

<xp:this.resources>
    <xp:styleSheet href="/myCSS.css"></xp:styleSheet>
</xp:this.resources>
<xp:checkBox id="checkBox1" styleClass="checkbox" value="#{viewScope.test}"></xp:checkBox>
<xp:label id="label1" for="checkBox1"></xp:label>
<xp:label id="label2" for="checkBox1" value="Label"></xp:label>

myCSS.css

.checkbox {
    display: none;
}

.checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.checkbox + label:active, .checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checkbox:checked + label {
    background-color: green;
    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);
    color: #white;
}

.checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: white;
}

score 0 · Answer 2 · answered Jan 21 '16 at 22:00

When using OneUI, you sometime have to force the override by using !important

I have ran across similar issues that I discuss in detail in this blog post I wrote: http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

Note: CSS purists will frown on this practice, but they likely have never used OneUI.

xPages checkbox styling background image

2 Answers2