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

我有一个带有过滤器的列表视图，如何更改过滤器主题，通过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>

指数

要素1
元素2
元素3
元素4
元素5
元素6

创建搜索输入并分配id

创建一个自定义样式并将其添加到

#custom filter

div，以便将样式应用于输入

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

---

@OmarThanksI已经尝试过了，但在我的应用程序中它不起作用，因为JSFIDLE边框应用于页面（页面周围），并且占位符没有出现在过滤器中@用户：我在fiddle中使用的id与答案中使用的id不同。应将占位符添加到自定义输入。@Omari使用了JSFIDLE中的代码，并且我已确保listview中的输入id和数据输入在我的code@OmarRegarding占位符，您在listview中指定它，如jsfiddle@OmarI在我的jQuery mobile 1.4.0应用程序中使用的代码所示。问题是边框出现在页面周围，而不是搜索输入周围。您能帮我吗？？我已经尝试过很多次了，但是页面周围仍然会出现边框

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

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