Onsen UI CSS Component Material Select Input

Last Updated : 04 Jul, 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 CSS Component Material Select Input component. The select component is used to select a single value or option from a dropdown.

Onsen UI CSS Component Material Select Input Classes:

select-input: This class denotes the component as a select element type.
select-input–material: This class is used to make the select input of material type.

Syntax:

<select class="select-input 
        select-input--material">
    <option>Java</option>
    <option>C++</option>
    <option>Python</option>
</select>

Example 1: In the following example, we have a material select input to choose a programming language from the given dropdown.

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" /> 
    <title>GeeksforGeeks | Onsen UI CSS</title> 
  
    <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> 
  
    <style> 
      #heading { 
        color: green; 
      } 
      #title { 
        font-style: bold; 
      } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading"> 
          GeeksforGeeks 
        </h1> 
        <strong id="title"> 
          Onsen UI CSS Component Material Select Input 
        </strong> 
  
      <p>Select a programming Language</p> 
      <select class="select-input select-input--material"> 
        <option>Java</option> 
        <option>C++</option> 
        <option>Python</option> 
      </select> 
    </center> 
</body> 
    
</html>

Output:

Example 2: In the following example, we can enable and disable select input with a disabled attribute by clicking enable or disable.

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" /> 
    <title>GeeksforGeeks | Onsen UI CSS</title> 
  
    <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> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading"> 
            GeeksforGeeks 
        </h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Select Input 
        </strong> 
  
        <p>Select a programming Language</p> 
        <select id="select" class="select-input  
                            select-input--material"> 
            <option>Java</option> 
            <option>C++</option> 
            <option>Python</option> 
        </select> 
        <br /> 
        <button onclick="disableSelect()" class="button"> 
            Disable 
        </button> 
        <button onclick="enableSelect()" class="button"> 
            Enable 
        </button> 
    </center> 
      
    <script> 
        function disableSelect() { 
            $('#select').attr('disabled', 'true') 
        } 
        function enableSelect() { 
            $('#select').removeAttr('disabled') 
        } 
    </script> 
</body> 
  
</html>