Trying to remove a icon when the input is active/focused. The problem is that :after do not work. When I click on the input the label is still visible.
Tried with content: none; but that didn't work.
#search-label {
position: relative;
font-weight: normal;
}
#search-label:before {
content:"\f002";
font-family: FontAwesome;
font-size: 115%;
position: absolute;
color: #dddddd;
top: 5px;
left: 8px;
}
Edit:
<div class="form-group">
<label id="search-label">
<input id="search-form" class="form-control" placeholder="{% trans "Search" %}" type="text" name="q" value="{{ request.REQUEST.q }}">
</label>
</div>
Can I do this with CSS or do I need JavaScript for this?
Image of it: http://imgur.com/a/pA1uN
It really depends on your markup, and if you have the freedom and/or ability to modify it.
Yes, the markup can be changed: CSS-only solution
If your label is a sibling and occurs after the input, you can toggle its display status based on the state of the input element itself, for example:
.input-row {
position: relative;
}
.input-row label {
position: absolute;
left: 0;
}
.input-row label::before {
transition: 1s;
/* Just to show how the toggle works */
}
.input-row label.icon1::before {
content: 'icon1';
}
.input-row label.icon2::before {
content: 'icon2';
}
.input-row input {
padding: 0 2rem 0;
}
.input-row input:focus + label::before,
.input-row input:active + label::before {
opacity: 0; /* To visually hide the label's pseudoelement */
pointer-events: none; /* To prevent any cursor-based interaction */
}
<form>
<div class="input-row">
<input type="text" name="input1" id="input1" />
<label for="input1" class="icon1"></label>
</div>
<div class="input-row">
<input type="text" name="input2" id="input2" />
<label for="input1" class="icon2"></label>
</div>
</form>
No, the markup cannot be changed: JS-only solution
If the markup cannot be changed, you will be forced to use a JS-only solution. This is because CSS does not have the ability to traverse backwards (i.e. select previous siblings) or up the parent node (i.e. select the wrapping elements). Remember that as pseudo-elements are not part of the DOM, you cannot select them via JS. Instead, you will have to toggle a class in order to perform the hiding/showing.
In my proof-of-concept example below using the markup that you have provided after updating your question, you can see how jQuery can be used to achieve the desired function. You can of course rewrite the JS function in native JS ;)
$(function() {
$('.form-group :input')
.focus(function() {
$(this).closest('label').addClass('hide');
})
.blur(function() {
$(this).closest('label').removeClass('hide');
});
});
label {
position: relative;
font-weight: normal;
}
label::before {
content: "icon";
font-family: FontAwesome;
font-size: 115%;
position: absolute;
top: 5px;
left: 8px;
transition: 1s; /* Added just to show the effect of toggling opacity */
}
label.hide::before {
opacity: 0; /* To visually hide the label's pseudoelement */
pointer-events: none; /* To prevent any cursor-based interaction */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label id="search-label">
<input id="search-form" class="form-control" placeholder="Search" type="text" name="q" value="">
</label>
</div>
Maybe someone will find this useful:
$('.form-group')
.focus(function() {
$(this).prev('label').addClass('u-hidden');
})
.blur(function() {
n=$(this).val();
if (n.length<1){
$(this).prev('label').removeClass('u-hidden');}else{
$(this).prev('label').addClass('u-hidden');
}
});
A jQuery solution would look something like this:
$("input").focus(function(){
$("span#your_icon").hide();
}).blur(function(){
$("span#your_icon").show();
});
A JS solution would look like this:
document.getElementById("myInput").addEventListener("focus", function(){
document.getElementById("#your_icon").style.display = 'none';
});
document.getElementById("myInput").addEventListener("blur", function(){
document.getElementById("#your_icon").style.display = 'inline';
});
Instead of label you can use a background image and do somthing like this
.input-search {
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
.input-search:focus {
background-image:none;
}
Working Fiddle here
albeit a few years late to the question... but I found the best article that worked wonders for me, using jQuery, this article shows us how to essentially add a class to the label's parent container (div) if the input field is either selected/focused AND if the field has a value, OR remove said class if the input field is NOT focused AND empty. https://knowbility.org/blog/2019/animating-form-labels
$("form input").on("blur input focus", function() {
var $field = $(this).closest(".field");
if (this.value) {
$field.addClass("filled");
} else {
$field.removeClass("filled");
}
});
$("form input").on("focus", function() {
var $field = $(this).closest(".field");
if (this) {
$field.addClass("filled");
} else {
$field.removeClass("filled");
}
});
Related
Is there equivalent css code of
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
for firefox and microsoft edge? So far I cannot find any documentations / resources regarding to the styling of placeholder for <input type='date'>. Any recommendations / answers is appreciated.
Tried the ::placeholder, ::-ms-input-placeholder and ::-moz-placeholder but they don't work when the input type is date.
Alternatively I am happy to accept the answer if someone can tell me how to hide the default placeholder.
By using F12 developer tools to check the HTML and CSS, we can see that Chrome browser using user agent sytelsheet and these pseudo-elements (::-webkit) apply to chrome browser, but in Microsoft Edge browser, it's not using user agent sytelsheet, and these pseudo-elements aren't applied to the input date textbox. So, the code not working in Microsoft Edge.
So, I think you could try to use Microsoft Edge Dev version (chromium based), the code works well on it.
Otherwise, as a workaround, I suggest you could refer to the following code to use text box and datepicker plugin to display the date.
<style>
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.month {
color: cornflowerblue;
}
.day {
color: aqua;
}
.year {
color:darkmagenta
}
.separate-letter {
color: red
}
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="input-field">
<input id="input-text-field" type="text" class="date" data-selecteddate="" value="" />
<label for="input-text-field">
<span id="span_month" class="month">MM</span>
<span class="separate-letter">/</span>
<span id="span_day" class="day">DD</span>
<span class="separate-letter">/</span>
<span id="span_year" class="year">YYYY</span>
</label>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function ($) {
$(".date").datepicker({
onSelect: function (dateText) {
//display("Selected date: " + dateText + "; input's current value: " + this.value);
var dataarray = dateText.split("/")
$("#span_month").html(dataarray[0]);
$("#span_day").html(dataarray[1]);
$("#span_year").html(dataarray[2]);
//clear the textbox value
this.value = "";
$("#input-text-field").attr("data-selecteddate", dateText);
}
})
});
</script>
The result like this (using Microsoft Edge browser):
I'm attempting to replicate the experience from the Shopify checkout in my WooCommerce checkout page by animating the labels when the user focuses on a certain input, just like this:
I've tried using input:focus ~ label, but it won't work because the default WooCommerce input is inside a span (.woocommerce-input-wrapper) like this:
<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">Nombre <abbr class="required" title="obligatorio">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
</span>
</p>
<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
position: absolute;
top: 11px;
left: 11px;
padding: 0;
color: #808080;
transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
top: -8px;
font-size: 12px;
font-weight: 500;
}
</style>
Thanks!
I hope you find these codes useful
my css:
label {}
.woocommerce form .form-row label {
position: absolute;
left: 10px;
top: 15px;
}
.woocommerce form .form-row {
position: relative;
}
label.floatlabel {
top: -30px !important;
}
mu jQuery :
jQuery('.woocommerce form .form-row input').click(function(){
var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");
if(jQuery('floatlabel').length ){
jQuery('label.floatlabel').removeClass('floatlabel');
}
jQuery(label).addClass('floatlabel');
})
The major issue with woocommerce checkout inputs is that labels are before inputs. For floating labels to work you need to place the labels after the inputs then it is all easy. (You can use any css method here: https://css-tricks.com/float-labels-css/).
I have tried finding a way to revert these elements in html but without success. I also tried using flexbox in css along with column-reverse but the animation didn't seem to work.
Basically the answer we are searching for is to the question: How to place labels after inputs in woocommerce checkout?
#Morteza Barati's answer could be good but it doesn't work properly. If inputs are autofilled then the label sits on top of them + once label moves up in case field is erased it won't come back down.
As already mentioned: There is no standardized way to change the input-label position on text input.
Off-topic: The design pattern in your screenshot comes from Googles material design (at least that's where it's commonly used and seen today). You can find more about that pattern here: https://material.io/components/text-fields
Solution with JS and CSS
You need some CSS and JS code to implement that design pattern. There are four different states you need to cover:
When a field receives the text-focus: Move the label up.
When a field loses focus and has no content: Move the label down.
When a field loses focus and has content: Leave the label up.
When a field has a value on page load: Move the label up.
Here's a short demo - the important part is the JS code which adds CSS classes to the field container on focus, blur and input.
jQuery('.form-row :input').each(function() {
var $input = jQuery(this);
var $row = $input.closest('.form-row');
// Is the field filled on page load?
if ($input.val()) {
$row.addClass('-filled');
}
// Enter or leave the "focus" state.
$input.on('focus', function() {
$row.addClass('-focus');
});
$input.on('blur', function() {
$row.removeClass('-focus');
});
// When the fields input value changes, add or remove the "-filled" state
$input.on('input', function() {
if ($input.val()) {
$row.addClass('-filled');
} else {
$row.removeClass('-filled');
}
});
})
.form-row {
position: relative;
padding-top: 20px; /* top padding adds space for the label */
margin: 10px 0;
}
.form-row label {
position: absolute;
top: 20px; /* initially, the label is down */
left: 0;
color: #aaa;
transition: all 0.3s;
}
/* Give both the label and input field the same padding/box-size */
.form-row input,
.form-row label {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* When the field is focused or filled, move the label up */
.form-row.-focus label,
.form-row.-filled label {
color: #6200ee;
font-size: 12px;
top: 0;
padding: 0;
line-height: 20px; /* Set the line height to the top-padding */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row">
<label for="field1">
Field 1 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field1">
</span>
</p>
<p class="form-row">
<label for="field2">
FIeld 2 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field2" value="Initial Value">
</span>
</p>
</div>
Pure CSS
TL;DR; this is not possible in WooCommerce out-of-the-box.
Note: A pure CSS solution is also possible when your comes after the field and could look like the below sample.
It works by using the input fields "placeholder" as the initial caption. The CSS selector :not(:placeholder-shown) matches every text field that has a value. The CSS selector :focus handles the input fields focus state.
However, this is just a sample and is not possible in WooCommerce without writing custom cart and checkout templates to produce the correct HTML elements.
.form-row {
position: relative;
padding-top: 20px;
margin: 10px 0;
}
.form-row label {
position: absolute;
color: #6200ee;
font-size: 12px;
top: 0;
left: 0;
padding: 0;
line-height: 20px;
opacity: 0;
transition: all 0.3s;
}
.form-row input {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* Here's the logic: */
.form-row input:focus::placeholder {
opacity: 0;
}
.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
opacity: 1;
}
<p class="form-row">
<input type="text" id="field1" placeholder="My Field">
<label for="field1">
My Field
</label>
</p>
I need to change color of label when textarea receiving some value.
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?
You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>
You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}
One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
JS Fiddle demo.
References:
:placeholder-shown (Selectors Level 4 spec).
I currently have a number of inputs like this:
<input type="number" id="milliseconds">
This input field is used to represent a value in milliseconds.
I do however have multiple number inputs which take a value in dB or percentages.
<input type="number" id="decibel">
<input type="number" id="percentages">
What I would like to do is add a type suffix to the input field to let users know what kind of value the input represents. Something like this:
(This image is edited to show what result I want to have,I hid the up and down arrows from the input type as well).
I have tried to Google this but I can't seem to find anything about it. Does anyone know if this is possible, and how you can accomplish something like this?
You can use a wrapper <div> for each input element and position the unit as a pseudo element ::after with the content of your corresponding units.
This approach works well for the absolute positioned pseudo elements will not effect the existing layouts. Nevertheless, the downside of this approach is, that you have to make sure, that the user input is not as long as the text field, otherwise the unit will be unpleasantly shown above. For a fixed user input length, it should work fine.
/* prepare wrapper element */
div {
display: inline-block;
position: relative;
}
/* position the unit to the right of the wrapper */
div::after {
position: absolute;
top: 2px;
right: .5em;
transition: all .05s ease-in-out;
}
/* move unit more to the left on hover or focus within
for arrow buttons will appear to the right of number inputs */
div:hover::after,
div:focus-within::after {
right: 1.5em;
}
/* handle Firefox (arrows always shown) */
#supports (-moz-appearance:none) {
div::after {
right: 1.5em;
}
}
/* set the unit abbreviation for each unit class */
.ms::after {
content: 'ms';
}
.db::after {
content: 'db';
}
.percent::after {
content: '%';
}
<div class="ms">
<input type="number" id="milliseconds" />
</div>
<hr />
<div class="db">
<input type="number" id="decibel" />
</div>
<hr />
<div class="percent">
<input type="number" id="percentages">
</div>
If you want to support browsers, that doesn't show these arrows at all, make use of #supports or media queries.
Another interesting approach would be to use a little of JavaScript in order to make suffix actually stick to the input text (which probably looks better):
const inputElement = document.getElementById('my-input');
const suffixElement = document.getElementById('my-suffix');
inputElement.addEventListener('input', updateSuffix);
updateSuffix();
function updateSuffix() {
const width = getTextWidth(inputElement.value, '12px arial');
suffixElement.style.left = width + 'px';
}
/**
* Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
*
* #param {String} text The text to be rendered.
* #param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
*
* #see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
*/
function getTextWidth(text, font) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
#my-input-container {
display: inline-block;
position: relative;
font: 12px arial;
}
#my-input {
font: inherit;
}
#my-suffix {
position: absolute;
left: 0;
top: 3px;
color: #555;
padding-left: 5px;
font: inherit;
}
<div id="my-input-container">
<input type="number" id="my-input" value="1500">
<span id="my-suffix">ms.</span>
</div>
However, this is just a proof of concept. You will need to work on it a little further to make it production-ready, e.g. make it a reusable plugin.
Also, you will need to handle a case, where input element is getting overflowed.
If you have option to add elements to input then you can try this:
.container {
max-width: 208px; /*adjust it*/
margin: auto;
position: relative;
display: inline-block;
}
#milliseconds {
padding-right: 35px;
}
.ms {
position: absolute;
top: 0;
right: 10px;
}
<div class="container">
<input type="text" id="milliseconds">
<span class="ms">ms</span>
</div>
I have a case where the design team wants the suffix to float with the values. We are using a custom font with very uneven number widths. I came with an idea to use a ghost to follow the input width and clamp the overflow with max-width by using a wrapper element. This is still a bit work in progress and glitchy (no initial fill, etc.).
const fillBuffer = (e) => {
// Clear the buffer if input gets wiped
if (e.target.value.length === 0) {
e.target.parentElement.querySelector('.suffix span').textContent = "";
return;
}
// Using a filler char will prevent the suffix to be overwritten with the input
const extraFiller = e.target.value.length ? '1' : '';
e.target.parentElement.querySelector('.suffix span').textContent = e.target.value + extraFiller;
}
// Attach the listeners
document.querySelectorAll('input').forEach((el) => {
el.addEventListener('keydown', fillBuffer);
el.addEventListener('keyup', fillBuffer);
});
* {
font-size: 1em;
font-family: Papyrus, sans-serif;
box-sizing: border-box;
}
body {
padding: 1em;
}
.input-wrapper {
margin-bottom: 0.5em;
}
.input-wrapper.with-suffix {
position: relative;
max-width: 150px;
overflow: hidden;
}
.input-wrapper.with-suffix input {
margin: 0;
width: 100%;
outline: 0;
padding-left: 4px;
padding-right: 16px;
}
.input-wrapper.with-suffix .suffix {
position: absolute;
padding-left: 6px;
top: 2px;
pointer-events: none;
width: 100%;
}
.input-wrapper.with-suffix .suffix span {
user-select: none;
pointer-events: none;
}
.input-wrapper.with-suffix .suffix .filler {
display: inline-block;
white-space: pre; /* Allow more than two whitespaces to be rendered */
color: rgba(0, 0, 0, 0.0);
background: rgba(255, 0, 0, 0.3);
max-width: calc(100% - 16px);
}
<div class="input-wrapper with-suffix">
<input type="text" value="5000">
<div class="suffix"><span class="filler">5000</span><span>€</span></div>
</div>
<div class="input-wrapper with-suffix">
<input type="text" value="5000">
<div class="suffix"><span class="filler">5000</span><span>€</span></div>
</div>
Is there a way to use CSS to update input fields without changing HTML code?
I have a form like this:
// HTML
<div id="LoginFormContainer">
<div class="formInputLine">
<div class="inputContainer">
<input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
</div>
</div>
<div class="formInputLine">
<div class="inputContainer">
<input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
</div>
</div>
<div class="formInputLine">
<input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
</div>
</div>
//CSS
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
text-transform: uppercase!important;
}
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
border: none;
font-size: 12px;
width: 100%;
color: #333;
outline: 0;
-webkit-appearance: caret;
}
// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.
.formInputLine::before {
content: "Username";
}
And would like to change it to the following using only CSS:
Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.
Thanks for the help, I greatly appreciate it.
If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.
So, for an example, if we have the following HTML structure:
<div class="input-wrapper">
<input type="text" placeholder="some text">
</div>
We can do the following in CSS:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
position: absolute;
left: 0;
bottom: calc( 100% + 10px );
content: "some text";
}
::-webkit-input-placeholder {
color: transparent !important;
}
(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).
You could have something like this:
I've included my own font, due to lack of context.
body {font-family: "Droid Sans"}
.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<div class='Input-Element'>
<label>Username</label>
<input name='user'>
</div>
<div class='Input-Element'>
<label>Password</label>
<input name='psw'>
</div>
Note: Click Run Code Snippet to see the form!
I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.
Using the CSS below can target the two fields individually and add the specific labels
/* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}
/* remove place holder */
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder {
/* Firefox 18- */
color: transparent;
}
::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
You can use some jquery and css
$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">