Skip to content
Related Articles

Related Articles

Onsen UI CSS Component Basic Select Input

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
View Discussion
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 CSS Component Basic Select Input component. The basic input is the simple type of input. The select component is used to select a single value or option from a dropdown.

Onsen UI CSS Component Basic Select Input Classes:

  • select-input: This class denotes the component as a select element type.

Syntax:

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

Example 1: In the following example, we have a basic select input to choose a tutorial topic 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" />
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    </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 Basic Select Input
        </strong>
  
        <p>Select a topic</p>
        <select class="select-input">
            <option>Hashmap</option>
            <option>Sorting</option>
            <option>Dynamic Programming</option>
        </select>
    </center>
</body>
  
</html>

Output:

 

Example 2: In the following example, we can enable and disable basic select input with the 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" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
  
    </script>
    </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 Basic Select Input
        </strong>
  
        <p>Select a topic</p>
        <select id="select" class="select-input">
            <option>Hashmap</option>
            <option>Sorting</option>
            <option>Dynamic Programming</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>

Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!