Question

我想将listview的渐变颜色更改为自定义颜色。谢谢！

<div class="content">
    <ul data-role="listview">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</div>

Answer 1

试试这个。下面的CSS适用于任何浏览器。第二个十六进制是顶部，第一个十六进制是渐变的底部。

.color_tabs li a {
background-color: #00B6CF !important;
background-repeat: repeat-x !important;
/* fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009DB2), to(#00B6CF)) !important;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(top, #009DB2, #00B6CF) !important;
/* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(top, #009DB2, #00B6CF) !important;
/* Firefox 3.6+ */
background: -ms-linear-gradient(top, #009DB2, #00B6CF) !important;
/* IE 10 */
background: -o-linear-gradient(top, #009DB2, #00B6CF) !important;
/* Opera 11.10+ */
color:#FFFFFF !important;
text-shadow:rgb(0, 0, 0) 0.08em 0.08em 0px !important;
border-bottom-width:1px !important;
border-bottom-color:#201F23 !important;
}

并将类“color_tabs”添加到ul。

<div class="content">
<ul data-role="listview" class="color_tabs">
    <li><a href="#">One</a>
    </li>
    <li><a href="#">Two</a>
    </li>
    <li><a href="#">Three</a>
    </li>
    <li><a href="#">Four</a>
    </li>
    <li><a href="#">Five</a>
    </li>
</ul>
</div>

我附加了一个带有悬停示例http://jsfiddle.net/22e998fx/

的jsfiddle

如何更改jquery移动列表视图的渐变颜色？

1 个答案: