使用 CSS 更改 jQuery Mobile 的默认列表颜色

我在下面给出了一个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;
}

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

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

提前致谢

我实际上无法对此进行测试，但是当 css 规则定义为 background-color: 并且您尝试仅用background:覆盖时，我之前已经注意到这样的奇怪之处

尝试将规则更改为background-color:。另外，如果你能帮助它，请远离！important，除非你确定这是你需要的。当你的css变得更加复杂时，这可能是一个真正的痛苦。

您所需要的只是将background-color规则设置为.ul-body

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

不要使用!improtant，将其作为最后的资源。

注意：如果其他列表可能包含名为 ui-body 的类，但您可以将父 ID 或类作为自定义类的选择器.ui-body

#Parent .ui-body{
}
.Parent .ui-body{
}

小提琴

相关内容

最新更新

热门标签：