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 >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< script src =
</ 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 >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< script src =
</ 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 >
|
Output:
Reference: https://onsen.io/v2/api/css.html#search-input-category
Share your thoughts in the comments
Please Login to comment...