Onsen UI CSS Component Material Search Input

Last Updated : 01 Sep, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

With the help of Onsen UI’s pre-built CSS components, creating adaptable and beautiful user interface layouts is a breeze. Onsen CSS components is a web-based topcoat theme roller for mobile developers that makes creating eye-catching UIs easier. Search Input is used to create a search box. Onsen UI CSS Component Material Search Input is used to create the Material Search Input box using the below class.

Onsen UI CSS Component Material Search Input Class:

search-input–material: This class is used to create the material search input.

Syntax:

<input type="search" value="" placeholder="..." 
       class="search-input search-input--material" 
       style="width: 280px;">

Example 1: The following example demonstrates the Onsen UI CSS Component Material Search Input.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI CSS Component Material Search Input 
        </h3> 
  
        <input type="search" value="" 
               placeholder="Search" 
               class="search-input  
                      search-input--material"  
               style="width: 280px;"> 
    </center> 
</body> 
</html> 

Output:

Example 2: The following example demonstrates the Onsen UI CSS Component Material Search Input.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI CSS Component Material Search Input 
        </h3> 
  
        <input type="search" value="" 
               placeholder="Search here..." 
               class="search-input  
                      search-input--material"  
               style="width: 200px;"> 
        <br> <br> 
        <input type="search" value="GeeksforGeeks" 
               placeholder="Search here..." 
               class="search-input  
                      search-input--material"  
               style="width: 350px;"> 
    </center> 
</body> 
</html>