Skip to content
Related Articles
Open in App
Not now

Related Articles

Onsen UI Select Input CSS Components

Improve Article
Save Article
  • Last Updated : 18 Jun, 2022
Improve Article
Save Article

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.

In this article, we are going to implement the Onsen UI Select Input CSS components. There are three types namely simple select input, material select input, and underbar select input.

Onsen UI Select Input CSS Component classes:

  • select-input: This class is used to implement select input options in the <select> tag.
  • select-input–material: This class is used to create a material select input.
  • select-input–underbar: This class is used to create an underbar select input.

Syntax:

<select class="select-input--underbar">
    <option>...</option>
    <option>...</option>
    ...
</select> 

Example 1: The following code demonstrates the Onsen UI select-input class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <strong>
            Onsen UI Select Input CSS Components
        </strong>
          
        <p><b> Select a course:</b></p>
          
        <select class="select-input">
            <option>Web technology</option>
            <option>Artificial Intelligence</option>
            <option>Data Science</option>
        </select>
           
        <p><b>Select your brand:</b></p>
        <select class="select-input" disabled>
            <option>Honda</option>
            <option>Tata</option>
            <option>Renault</option>
        </select>
    </center>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the Onsen UI select-input–material and select-input–underbar classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h2 style="color:green;">
            GeeksforGeeks
        </h2>
  
        <strong>
            Material & Underbar Select Input CSS Component
        </strong>
          
        <p><b>Select option:</b> <p>
            <select class="select-input 
               select-input--material select-input--underbar">
                <option>PHP</option>
                <option>CSS</option>
                <option>HTML</option>
            </select>
    </center>
</body>
  
</html>


Output:

 

Reference: https://onsen.io/v2/api/css.html#select-input-category


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!