Ionic Input Fields with Floating Labels and Icons Both

Ionic Framework using AngularJS 1 is having some different type of input field styles like:

1) Placeholder Labels
2) Inline Labels
3) Stacked Labels
4) Floating Labels
5) Inset Forms
6) Input Icons

Documentation for these can be found here http://ionicframework.com/docs/components/#forms

But the style which I was looking for was a merge of both Floating labels plus Input Icons. There was not a way to use a blend of these anywhere. But after some CSS tweaking, I managed to achieve the piece I was looking for


Let’s start …

Here we will take an example of Login form having Username and Password inputs

For Foating Labels we add following Ionic HTML

 

 

For adding input labels we use the following code

 

Now if we merge both it will look a bit distorted 


To make it look decent we will add a custom class and some CSS style.
Add “custom-login-label” class on label and CSS style

 

Final HTML will look like this 

 

 

 

It’s Done now you have Ionic input with both floating labels and Icons in it .

Leave a Reply

avatar
  Subscribe  
Notify of