is there any way to create a text input just like search bar for Jquery Mobile. For example when we type text there should be a cross mark which allows users to clear the field.
Even if I to use search bar as input field there is a search icon showing up and it doesn't seem nice and appropritate for a textbox.
Can someone help me out. Thanks in advance
is there any way to create a text input just like search bar for Jquery Mobile. For example when we type text there should be a cross mark which allows users to clear the field.
Even if I to use search bar as input field there is a search icon showing up and it doesn't seem nice and appropritate for a textbox.
Can someone help me out. Thanks in advance
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Feb 1, 2012 at 9:41 Jaya MayuJaya Mayu 17.3k34 gold badges115 silver badges149 bronze badges2 Answers
Reset to default 3I think this is what you are looking for.The idea is to hide the icon in the search input.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery./mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery./jquery-1.6.4.min.js"></script>
<script src="http://code.jquery./mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.content .ui-icon-searchfield::after{
display:none !important;
}
.content .ui-input-search{
padding:0 10px !important;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" class="content">
<input type="search" name="search" id="searc-basic" value="" />
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle/8sg6M/
Add data-clear-btn="true" to your input TextBox