Onsen UI CSS Component Underbar Select Input

Last Updated : 10 Feb, 2023

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 Underbar Select Input.This is done using <ons-select> component. The underbar modifier displays a horizontal line underneath a select input.

Syntax:

<ons-select id=" " onchange=" ">
    <option value="...">...</option>
    <option value="underbar">Underbar</option>
   ...
</ons-select>

Attributes:

id: This is used to set the select input id.
onchange: This is used to call the function which should get triggered on changing any select input option.
value: This is used to set the value of one select input item.

Example 1: The following code demonstrates the Onsen UI CSS Underbar Select Input using the HTML <select> tag with the select-input–underbar 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" />
    <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"/> 
         
</head>
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>
          Onsen UI Underbar Select Input CSS Components
          </strong>
        <p><b> Select a course:</b></p>
        <select class="select-input select-input--underbar">
            <option>Tableau</option>
            <option>Web technology</option>
            <option>Artificial Intelligence</option>
            <option>Data Science</option>
        </select>           
    </center>   
</body>
</html>

Output:

Example 2: The following code demonstrates the use of underbar select input using the Onsen UI CSS framework. On change of the select input option, it triggers the changeSelectInput(event) function call.

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"/>
          
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <title>GeeksforGeeks | Onsen UI CSS</title>
 </head>
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>
          Onsen UI CSS Component Underbar Select input
          </strong>
        <br/>         
 
        <h4>
          Choose a type of select with different modifiers:
          </h4>
          <ons-select id="mySelectID"
                      onchange="changeSelectInput(event)">
            <option value="basic">Basic</option>            
            <option value="underbar">Underbar</option>
          </ons-select>        
    </center>
    <script>
        // Sets the value of select input 
        function changeSelectInput(event) {
          document.getElementById('mySelectID')
            .removeAttribute('modifier');
          if (event.target.value == 'basic' || 
              event.target.value == 'underbar') {
            document.getElementById('mySelectID').setAttribute(
              'modifier', event.target.value);
          }
        }
    </script>
</body>
</html>