如何更改xPage組合框下拉箭頭的背景顏色？

組合框箭頭在Chrome和IE中看起來不錯，但在FF中不太好。這裏是我的簡單的XPage：如何更改xPage組合框下拉箭頭的背景顏色？

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 

<xp:comboBox id="inputComboBoxSearch" defaultValue="0" value="0" 
    style="height:60px; width:120px; text-align:right; box-shadow:none; border-radius:0; display:inline;"> 
     <xp:selectItem itemLabel="Search by" itemValue="0"></xp:selectItem> 
     <xp:selectItem itemLabel="User" itemValue="1"></xp:selectItem> 
     <xp:selectItem itemLabel="Date" itemValue="2"></xp:selectItem> 
     <xp:selectItem itemLabel="City" itemValue="3"></xp:selectItem> 
    </xp:comboBox> 
</xp:view> 

And here is how it look like in different browsers. How to change FF style so it is same as on Chrome?

來源

2017-02-12 John Glabb

的問題似乎是與邊境財產。請參閱this codepen。 XPage組合框通過core.css中的「.lotusForm select」css樣式應用程序繼承邊框屬性。我發現避免這個問題的唯一辦法就是通過設置disableTheme真對XPage上的屬性的CreateForm設置在組合框假和禁用主題化。

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    createForm="false"> 


    <xp:comboBox id="inputComboBoxSearch" defaultValue="0" value="0" 
     style="height:60px; width:120px; text-align:right; display:inline; " 
     disableTheme="true" > 
     <xp:selectItem itemLabel="Search by" itemValue="0"></xp:selectItem> 
     <xp:selectItem itemLabel="User" itemValue="1"></xp:selectItem> 
     <xp:selectItem itemLabel="Date" itemValue="2"></xp:selectItem> 
     <xp:selectItem itemLabel="City" itemValue="3"></xp:selectItem> 
    </xp:comboBox> 

</xp:view>

來源

2017-02-12 17:20:32

仍然無法正常工作。下拉在FF中看起來很奇怪..任何在應用程序屬性我需要調整？ –

@John，如果從樣式中刪除'border-radius：0;'，它可以用於Firefox 45.7.0和主題「Bootstrap3」。你不需要設置'createForm =「false」'。只需添加'disableTheme =「true」'就足夠了。所以，@西蒙，你的解決方案是爲約翰的情況下更好的:) –

西蒙的例子不起作用。你在應用程序中啓用了Bootstrap3主題嗎？ –

將styleClass=""添加到您的xp：comboBox中。然後，Firefox的箭頭灰色背景消失了。

如果您想在所有瀏覽器上查看您的組合框，請使用Dojo並添加dojoType="dijit/form/Select"。

<xp:comboBox 
    id="inputComboBoxSearch" 
    defaultValue="0" 
    value="0" 
    style="height:60px; width:120px;" 
    dojoType="dijit/form/Select">

來源

2017-02-12 19:47:02

將styleClass =「」添加到我上面的示例中對FF沒有幫助。 012xxdojoType =「dijit/form/Select」只是打破了所有在style =「... –

中設置的內容。你使用哪個主題？它適用於主題爲」Platform default「和」webstandard「的FF版本51. –

設置styleClass =「」在FF 51.0.1，Dom 9.0.1FP7上也適用於我，它比我的解決方案更合適。 –

這是修復程序。不需要禁用主題或創建表單參數。與Bootstrap3主題...

height:60px; 
width:120px; 
display:inline; 
background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat; 
-webkit-appearance:none; 
-moz-appearance:none; 
background-position: 95px 20px;

來源

2017-02-16 16:32:07

如何更改xPage組合框下拉箭頭的背景顏色？

回答

相關問題