如何更改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?
的问题似乎是与边境财产。请参阅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>
将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">
将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;
仍然无法正常工作。下拉在FF中看起来很奇怪..任何在应用程序属性我需要调整? –
@John,如果从样式中删除'border-radius:0;',它可以用于Firefox 45.7.0和主题“Bootstrap3”。你不需要设置'createForm =“false”'。只需添加'disableTheme =“true”'就足够了。所以,@西蒙,你的解决方案是为约翰的情况下更好的:) –
西蒙的例子不起作用。你在应用程序中启用了Bootstrap3主题吗? –