How to assign a custom style to a list view filter in jQuery mobile 1.4.0?

Question

I have a list view with a filter , How can i change the filter theme , add specific style to it by css ? since i need to modify the filter icon , border but i don't know how to assign these styles to it , Please help me ..

<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

Create a search input and assign an id.

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

In ul, add data-input attribute with value the id of the search input starting with # hash tag data-input="#custom-filter".

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

Create a custom style and add it to #custom-filter div to have the styles applied on the input.

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

Demo