Onsen UI CSS Component Basic Search Input

Last Updated : 19 Jul, 2022

Onsen UI is an innovative and useful HTML5 framework that is free for use. It streamlines UI development so that app developers may concentrate on the software’s functionality. Onsen UI is a fantastic resource with a wide variety of premium UI elements created especially for mobile apps and filled with features that adhere to native iOS and Android design standards. Although it may also be used with jQuery or any other framework, Onsen UI is designed to work with AngularJS. Using PhoneGap and Cordova, the Onsen UI JavaScript framework was developed.

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. A Basic Search Input is really a very useful CSS component that can be used to take inputs and primarily can be used as a search bar.

Onsen UI CSS Component Basic Search Input Classes:

search-input: This class is used with an <input> element to make a basic search input.

Syntax:

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

Example 1: The code below demonstrates how to create a basic search input.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
          </h1> 
        <h3 style="margin-top:1rem;"> 
            Onsen UI CSS Component Basic Search Input 
          </h3> 
    </div> 
    <div style="margin:3rem;font-family:Roboto,sans-serif;"> 
        <input type="search" value="" placeholder="Search" 
               class="search-input" style="width:280px;">   
    </div> 
</body> 
</html>

Output:

Example 2: The code below demonstrates how we can add a basic search input inside other CSS components like a card.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
</head> 
  
<body> 
    <div style="margin:3rem; font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
          </h1> 
        <h3 style="margin-top:1rem;"> 
            Onsen UI CSS Component Basic Search Input 
          </h3> 
    </div> 
    <div style="height:20px; padding:1px 0 0 0;"> 
        <div class="card card--material"> 
            <div class="card__content card--material__content"> 
                <input type="search" value="" placeholder="Search" 
                       class="search-input" style="width:280px;"> 
            </div> 
        </div> 
    </div> 
</body> 
</html>