Onsen UI Select Input CSS Components

Last Updated : 18 Jun, 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.

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= 
        "https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
</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= 
        "https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
</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>