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.
<!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
<!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