Material Inputs

Developer
Simeon Simeonoff
Size
3,313 Kb
Views
32,384
  1. Material Inputs Previews
  2. Material Inputs HTML Codes
  3. Material Inputs CSS Codes
  4. Material Inputs JS Codes

How do I make an material inputs?

What is a material inputs? How do you make a material inputs? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

Material Inputs Previews
IQ Test

Material Inputs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Inputs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form class="cntr">	<div class="ig-input">	<input type="text" id="username" name="username" placeholder="Enter your username"/>	<label for="username">Username</label>	</div>	<div class="ig-input">	<input type="password" id="password" name="password" placeholder=""/>	<label for="password">Password</label>	</div>	<div class="ig-input">	<input type="tel" id="phone" name="phone"/>	<label for="phone">Phone Number</label>	</div>	<div class="ig-input ig-input--error" data-extra="Incorrect input">	<input type="text" id="error" name="error" value="erroneous text"/>	<label for="error" class="active">Error</label>	</div>	<button type="submit">Submit</button>
</form> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Inputs - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
body { font-size: 100%; font-size-adjust: 0.58; font-family: 'Titillium Web', sans-serif; -webkit-font-smoothing: antialiased;
}
.cntr { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
*::-webkit-input-placeholder { -webkit-text-fill-color: rgba(0, 0, 0, 0.5);
}
.ig-input { display: block; position: relative; min-height: 70px;
}
.ig-input label { display: block; position: absolute; top: 10px; font-size: 1rem; color: #D1D1D1; cursor: text; pointer-events: none; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.ig-input input { outline: none; border: none; border-bottom: 1px solid rgba(117, 117, 117, 0.5); font-family: 'Titillium Web', sans-serif; font-size: 1rem; line-height: 30px; color: #0375BE; -webkit-text-fill-color: #484848;
}
.ig-input input:focus { border-bottom: 2px solid #0375BE;
}
.ig-input label.active,
.ig-input input:focus ~ label { top: -10px; font-size: .75rem; color: #0375BE;
}
.ig-input input:not(:focus) ~ label { color: #757575;
}
.ig-input:after { content: attr(data-extra); position: absolute; padding-top: 5px; font-size: .75rem;
}
.ig-input--error input, .ig-input--error input:focus { color: red; border-bottom: 2px solid red;
}
.ig-input--error label, .ig-input--error:after { color: red !important;
}

Material Inputs - Script Codes JS Codes

$(document).on('change', '.ig-input', function(){	toggleActiveLabel();
});
var toggleActiveLabel = function() {	$('.ig-input').each(function(i, element) {	var input = $(element).find('input'),	label = $(this).find('label');	if (input.val().length !== 0 || input.attr('placeholder') !== '' && input.attr('placeholder') !== undefined) {	label.addClass('active')	} else {	label.removeClass('active');	}	});
}
// run once
toggleActiveLabel();
Material Inputs - Script Codes
Material Inputs - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 3,313 Kb
Views 32,384
Do you need developer help for Material Inputs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simeon Simeonoff (simeonoff) Script Codes
Name
Notification Animation
Flex Table
Material Design Calendar
Material Radio Buttons
Grid Layout
A Pen by Simeon Simeonoff
Flexbox SASS Grid
Bouncy Switch
Toggle Buttons
Avatar
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!