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

Question

组合框箭头在 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">