如何更改xPage组合框下拉箭头背景颜色？

Question

Combobox箭头在Chrome和IE中看起来很不错但在FF中效果不佳。 这是我简单的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?

Answer 1

将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">

Answer 2

问题似乎与 border 属性有关。见this codepen。 XPage组合框通过＆＃34; .lotusForm select＆＃34;继承 border 属性。来自core.css的css样式应用程序。我发现避免这种情况的唯一方法是将XPage上的createForm属性设置为 false AND 通过将 disableTheme 设置为禁用组合框上的主题真。

<?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>

Answer 3

这是修复。无需禁用主题或创建表单参数。适用于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;