Hide search icon jQuery mobile listview filter

Question

Hide search icon jQuery mobile listview filter

1k Views Asked by Manish Chandra Kumar At 05 April 2025 at 07:56

How to hide search icon from jQuery mobile listview filter.

I want to use like Auto Complete input box without any icon.

Original Q&A

There are 2 best solutions below

Toby On 15 December 2013 at 23:41

I would change the padding of the input field and then set the icon to not be displayed:

.ui-input-search {
  padding: 0 .4em !important;
}

.ui-icon-searchfield:after {
  display: none !important;
}

**Ved** · Accepted Answer

Auto Complete input box without any icon

<DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style>
        .ui-input-search .ui-input-clear {display: none;}
        .ui-icon-searchfield: after {display: none;}
    </style>        
</head>
<body>
    <div data-role="page" id="myPage1">
        <div data-role="content" id="content">
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
                <li><a href="#">Acura</a>
                </li>
                <li><a href="#">Audi</a>
                </li>
                <li><a href="#">BMW</a>
                </li>
                <li><a href="#">Cadillac</a>
                </li>
                <li><a href="#">Chrysler</a>
                </li>
                <li><a href="#">Dodge</a>
                </li>
                <li><a href="#">Ferrari</a>
                </li>
                <li><a href="#">Ford</a>
                </li>
                <li><a href="#">GMC</a>
                </li>
                <li><a href="#">Honda</a>
                </li>
                <li><a href="#">Hyundai</a>
                </li>
                <li><a href="#">Infiniti</a>
                </li>
                <li><a href="#">Jeep</a>
                </li>
                <li><a href="#">Kia</a>
                </li>
                <li><a href="#">Lexus</a>
                </li>
                <li><a href="#">Mini</a>
                </li>
                <li><a href="#">Nissan</a>
                </li>
                <li><a href="#">Porsche</a>
                </li>
                <li><a href="#">Subaru</a>
                </li>
                <li><a href="#">Toyota</a>
                </li>
                <li><a href="#">Volkswagen</a>
                </li>
                <li><a href="#">Volvo</a>
                </li>
            </ul>
        </div>
    </div>
  </body>
</html>

Hide search icon jQuery mobile listview filter

There are 2 best solutions below

Auto Complete input box without any icon

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-LISTVIEW

Trending Questions

Popular # Hahtags

Popular Questions