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 −