如何在 jQuery mobile 1.4.0 中为列表视图过滤器分配自定义样式？

Question

我有一个带有过滤器的列表视图，如何更改过滤器主题，通过 css 为其添加特定样式？因为我需要修改过滤器图标，边框但我不知道如何将这些样式分配给它，请帮助我..

<div data-role="page" id="index">

<div  data-role="header" data-position="fixed"  data-tap-toggle="false" data- fullscreen="false"   data-theme="b">

<div  style="padding-top:15px;" > <font  color="white"   size="6px" >Index </font></div>
</div>
<div data-role="content"  >

<ul data-role="listview"  data-filter="true" data-filter-placeholder="Search..  " 
data-split-icon="delete"  style="margin-top: 30px;" > 
    <li> element1</li>
     <li> element2</li>
     <li> element3</li>
     <li> element4</li>
     <li> element5</li>
     <li> element6</li>

    </ul>
 </div>
</div>

Answer 1

创建一个搜索输入并分配一个id。

<input type="search" id="custom-filter" />

在ul 中，添加data-input 属性，其值为搜索输入 的id，以# 哈希标记data-input="#custom-filter" 开头。

<ul data-role="listview" data-filter="true" data-input="#custom-filter">

创建自定义样式并将其添加到 #custom-filterdiv 以将样式应用于输入。

$("#custom-filter").closest("div").addClass("styles");

Demo