使用css更改jquery mobile的默认列表颜色

时间:2014-04-04 09:41:15

标签: css jquery-ui

我有一个html页面,如下所示

<body>
    <div data-role="page" id="home">

        <div data-role="header" data-position="fixed">
            <a href="#home" data-role="button" data-icon="home"></a>
        </div>
        <div data-role="content">
            <div class="content-primary">
                <form id="frm1">
                    <ul data-role="listview">
                        <li data-role="fieldcontain">
                            <label for="Name">name:</label>
                            <input type="text" Name="Name" id="Name" value="" />
                        </li>
                        <li data-role="fieldcontain">
                            <label for="No">no:</label>
                            <input type="text" No="No" id="No" value="" />
                        </li>
                        <li data-role="fieldcontain">
                            <label for="countryName">Country name:</label>
                            <input type="text" countryName="countryName" id="countryName" value="" />
                        </li>
                        <li data-role="fieldcontain">
                            <label for="stateName">State name:</label>
                            <input type="text" stateName="stateName" id="stateName" value="" />
                        </li>
                        <li data-role="fieldcontain">
                            <label for="cityName">City name:</label>
                            <input type="text" cityName="cityName" id="cityName" value="" />
                        </li>

                </form>
            </div>
        </div>
</body>

我正在使用以下链接中显示的以下jquery 1.3.2链接

http://jquerymobile.com/download/

我在下面给出了css文件

.ui-body-c { background:#FFFFFF !important; }

.ui-page .ui-header {
    background:#0B0B3B !important;
}
.ui-page .ui-footer {
    background:#0B0B3B !important;
}

当我使用上面的代码时,显示的列表包含灰色。

如何在显示的列表中获得白色而不是灰色。

提前致谢

2 个答案:

答案 0 :(得分:1)

我实际上无法对此进行测试,但在将css规则定义为background-color:并且您尝试仅使用background:

覆盖之前,我已经注意到这样的奇怪之处

尝试更改规则,改为说background-color:。此外,如果你可以帮助它,请保持清醒!重要的除非你确定它是你需要的。当你的CSS越来越复杂时,这可能是一个真正的痛苦。

答案 1 :(得分:1)

您只需将background-color规则设为.ul-body

即可
.ui-body{
    background-color:#FFF;
}

请勿使用!improtant,将其保留为最后一个资源。

注意:如果某些其他列表可能包含名为ui-body的类,但您可以将父ID或类作为选择器提供给自定义类.ui-body

#Parent .ui-body{

}

.Parent .ui-body{

}

fiddle