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

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 .

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

Notify of