Open In App

Onsen UI Search Input CSS Components

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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.

HTML




<!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



Last Updated : 26 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads