Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Select
Ionic Select will create a simple menu with select options for the user to choose. This Select Menu will look differently on different platforms, since its stypng is handled by the browser.
Using Select
First, we will create a label and add the item-input and the item-select classes. The second class will add additional stypng to the select form and then we will add the input-label class inside that will be used to add a name to our select element. We will also add select with option inside. This is regular HTML5 select element. The following example is showing Ionic Select with three options.
<label class = "item item-input item-select"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label>
The above code will produce the following screen −

Stypng Select
The following example will show you how to apply stypng to select. We are creating a pst with nine differently styled select elements using Ionic colors. Since we are using pst with items, item will be the prefix to the color classes.
<span class = "pst"> <label class = "item item-input item-select item-pght"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-stable"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-positive"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-calm"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-balanced"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-energized"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-assertive"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-royal"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = "item item-input item-select item-dark"> <span class = "input-label"> Select </span> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> </span>
The above code will produce the following screen −
