Question

如何更改复选框样式？我需要特别替换选中的复选框背景/图像..

这是我的xPage代码：

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

这是CSS：

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

问题是当选中复选框时，它仅设置边框而不设置背景颜色为绿色。如果我尝试设置并为已选中的图像设置图像，则相同。

Answer 1

您无法为选中的复选框设置背景颜色。即使!important也无济于事。

您可以使用JavaScript（更改事件上的切换类）或高级CSS来解决此问题。

使用CSS，您可以隐藏浏览器的默认复选框，并将其替换为图片或＆＃34;构建的＆＃34;复选框。

以下示例是博客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;
}

Answer 2

使用OneUI时，您有时必须使用!important

强制覆盖

我遇到了类似的问题，我在这篇博文中详细讨论过：http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

注意：CSS纯粹主义者会对此做法不满意，但他们可能从未使用过OneUI。

xPages复选框造型背景图像

2 个答案: