Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and Android design standards. Onsen UI was created with AngularJS in mind, but it can also be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova JavaScript Framework.
Search Input is used to create a search box, that has the default Search Input or Material Search Input.
Onsen UI Search Input CSS Component Classes:
- search-input: This class is used to create a simple search bar.
- search-input–material: This class is used to create a stylish search bar with a 3-d effect.
Syntax:
<element-name class="Search-Input-Class">...</element-name>
Example1: In the below example, we will see how to create a simple search box.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Onsen UI Search Input CSS Component
</strong>
<br>
<input type="search" value="" placeholder="Search" class="search-input" style="width: 245px;">
</center>
</body>
</html>
|
Output:
Example 2: In the below example, we will see how to create a stylish search box.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Onsen UI Search Input CSS Component
</strong>
<br>
<input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 255px;">
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#search-input-category