如何更改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组合框下拉箭头的背景颜色？

回答

相关问题