From a502138beed4cc174851b858a465b5a7065ba036 Mon Sep 17 00:00:00 2001
From: Bruno Oliveira Notario <bruno@exacti.com.br>
Date: Mon, 30 Nov 2020 03:54:18 -0300
Subject: [PATCH] Readme change

---
 README.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3ddd319..57b5384 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,10 @@ First Include the stylesheet in your html. If you prefers, use this CDN: https:/
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/exacti/floating-labels@latest/floating-labels.min.css" media="screen">
 ```
 Just put the input or textarea element inside a parent (div or span) with `.form-label-group` class and add a label tag after this element.
-The input and label must have the same id linked with for in label to work properly. 
+
+The input and label must have the same id linked with for in label to work properly. Input must have the `placeholder` defined.
+
+For in border style (like outlined material design), add the `.in-border` class. 
 
 #### Code samples
 
@@ -28,8 +31,9 @@ The input and label must have the same id linked with for in label to work prope
 </div>
 ```
 
+Like outlined material design (In Border):
 ```html
-<div class="form-label-group">
+<div class="form-label-group in-border">
     <input type="text" id="tt3" class="form-control form-control-lg" placeholder="Floating Label lg" />
     <label for="tt3">Floating Label lg</label>
 </div>
@@ -41,6 +45,14 @@ Make the label after input with JavaScript code, like this sample made with jQue
 $('.intl-tel-input ~ label').insertAfter('.intl-tel-input input.form-control');
 ```
 
+Or this most advanced code (ideal for 2 or more elements):
+```JavaScript
+$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
+			let label = $(element).parent().find('~ label');
+			$(element).after(label);
+});
+```
+
 ## Dependencies
 
 Works perfect with Bootstrap 4 but Bootstrap isn't required. Requires a browser compatible with [:placeholder-shown](https://caniuse.com/#feat=css-placeholder-shown) CSS pseudo-element.