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;}

的問題是，當複選框被選中它只設置邊框，但不設置背景顏色綠色。如果我嘗試設置併爲其選中圖像，則會出現相同情況。

來源

2016-01-21 VladP

[本]（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; 
}

來源

2016-01-21 23:32:42

使用OneUI，你有時必須使用!important

我已經跨過我詳細的這篇博客我寫了討論類似的問題跑給力倍率：http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

注：CSS純粹主義者對這種做法不以爲然，但他們可能從未使用過OneUI。

來源

2016-01-21 22:00:37

xPages複選框樣式背景圖片

回答

相關問題