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:/ ``` 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 ``` +Like outlined material design (In Border): ```html -
+
@@ -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.