xPages复选框样式背景图片

问题描述：

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

这里是我的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;}

的问题是，当复选框被选中它只设置边框，但不设置背景颜色绿色。如果我尝试设置并为其选中图像，则会出现相同情况。

[本]（http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css）可能有帮助 – Venugopal

在提出新问题之前，请使用搜索功能，这里有很多话题。 –

嗯，它不适用于xPages应用程序。我确实想保留当前oneUI风格的复选框，但选中一个我想设置自己的风格 – VladP

答

您无法为已选中的复选框设置背景颜色。即使!important也没有帮助。

尽管您可以使用JavaScript（在切换事件上切换类）或高级CSS解决方法。

使用CSS，您可以隐藏浏览器的默认复选框并将其替换为图片或“构造”复选框。

下面的例子是博客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; 
}

答

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

我已经跨过我详细的这篇博客我写了讨论类似的问题跑给力倍率：http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

注：CSS纯粹主义者对这种做法不以为然，但他们可能从未使用过OneUI。

xPages复选框样式背景图片

相关推荐