Jquery Mobile - Customizing the Jquery mobile search

This example demonstrates how to customize the default search box in Jquery Mobile.

by Shreerang Patwardhan

HTML

<div data-role="page">
    <div data-role="content">
        <form>
            <label for="search4" class="ui-hidden-accessible">Placeholder Label</label>
            <input type="search" name="search4" id="search4" placeholder="Placeholder text" />
        </form>
    </div>
</div>

CSS

.ui-shadow-inset{
    box-shadow: none !important;
}

.ui-icon-delete{
    background: url("http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-32/cross-circle.png") no-repeat !important;
    background-size: 18px 18px;
}

.ui-icon, .ui-icon-searchfield:after{
    background: url("https://www.gjensidige.no/_public/gjensidigewww/gfx/site-search/input-search-icon.png?_ts=13e66625fc0");
    background-size: 18px 18px !important;
}

.ui-input-search .ui-input-clear{
    border: none;
}