Floating Material Input

Developer
Kyle Houston
Size
5,185 Kb
Views
16,192
  1. Floating Material Input Previews
  2. Floating Material Input HTML Codes
  3. Floating Material Input CSS Codes
  4. Floating Material Input JS Codes

How do I make an floating material input?

On focus floating label scales and repositions to allow for inout text to be added. Hint text opacity is animated to 1. Input underline colour is animated from center and to a colour.. What is a floating material input? How do you make a floating material input? This script and codes were developed by Kyle Houston on 08 October 2022, Saturday.

Floating Material Input Previews
IQ Test

Floating Material Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Material Input</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--.input-field--focused, .input-field--success, .input-field--error, .input-field--dirty -->
<div class="input-field input-field--floating js-input-field">	<label class="input-field__label input-field__label--floating" for="text-input">Floating Label Text</label>	<div class="input-field__hint-text">Hint Text</div>	<input class="input-field__text-input js-input" id="text-input" type="text">	<div class="input-field__underline"></div>	<small class="input-field__response input-field__response--error">This field is required</small>
</div>
<button class="button js-error">Submit Error</button>
<div class="input-field input-field--multi js-input-field">	<div class="input-field__hint-text">Multi Line</div>	<div class="input-field__text-input">	<textarea class="input-field__text-input--textarea js-input js-textarea" id="text-input" type="text"></textarea>	</div>	<div class="input-field__underline"></div>	<small class="input-field__response input-field__response--error">This field is required</small>
</div> <script src="js/index.js"></script>
</body>
</html>

Floating Material Input - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto);
* { padding: 0; margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; font-weight: normal;
}
body { height: 100vh; padding: 10%; background: #F5FAFD; font-family: Roboto; max-width: 600px;
}
fieldset { border: none; padding: 0; margin: 0; width: 100%;
}
input,
textarea { background-color: transparent; border: none; resize: none; -webkit-appearance: none; -webkit-border-radius: 0; outline: none;
}
.input-field { position: relative; width: 100%; margin-bottom: 8px;
}
.input-field--floating { height: 64px;
}
.input-field--multi .input-field__hint-text { top: 8px;
}
.input-field--multi .input-field__text-input { padding-top: 21px;
}
.input-field--multi .input-field__hint-text { opacity: 1;
}
.input-field__text-input--textarea { width: 100%; position: relative; width: 100%; height: 100%; border: none; outline: none; height: 20px;
}
.input-field__label { top: 24px; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); -webkit-transform-origin: left top; transform-origin: left top; will-change: transform; -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.input-field__label--floating,
.input-field__hint-text { position: absolute; line-height: 46px;
}
.input-field__label--floating { color: rgba(0, 0, 0, 0.3);
}
.input-field__hint-text { font-size: 16px; top: 24px; opacity: 0; color: rgba(0, 0, 0, 0.3); will-change: opacity; -webkit-transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.input-field__text-input { font-size: 16px; position: relative; width: 100%; height: 100%; border: none; outline: none; background-color: transparent; padding-top: 29px; border-bottom: 1px solid #E0E0E0;
}
.input-field__underline { position: relative; display: block; margin-top: 1px;
}
.input-field__underline:before, .input-field__underline:after { content: ""; height: 2px; width: 0; bottom: 1px; position: absolute; background-color: #00BCD4; will-change: width; -webkit-transition: width 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: width 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.input-field__underline:before { left: 50%;
}
.input-field__underline:after { right: 50%;
}
.input-field__response { position: absolute; bottom: -19px; font-size: 12px; line-height: 12px; opacity: 0; will-change: opacity; -webkit-transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.input-field__response--error { color: #F44336;
}
.input-field--focused .input-field__hint-text { opacity: 1;
}
.input-field--focused .input-field__underline:before,
.input-field--focused .input-field__underline:after { width: 50%;
}
.input-field--floating.input-field--focused .input-field__label--floating { -webkit-transform: scale(0.75) translate3d(0, -21px, 0); transform: scale(0.75) translate3d(0, -21px, 0); color: #00BCD4;
}
.input-field--dirty .input-field__label--floating { -webkit-transform: scale(0.75) translate3d(0, -21px, 0); transform: scale(0.75) translate3d(0, -21px, 0);
}
.input-field--dirty .input-field__hint-text { opacity: 0;
}
.input-field--error .input-field__response { opacity: 1;
}
.input-field--error .input-field__underline:before,
.input-field--error .input-field__underline:after { background-color: #F44336; width: 50%;
}
.input-field--focused.input-field--error .input-field__label,
.input-field--dirty.input-field--error .input-field__label { color: #F44336;
}
.button { font-weight: bold; -webkit-tap-highlight-color: transparent; border: none; text-transform: uppercase; text-decoration: none; display: inline-block; background-color: #2979FF; color: white; font-size: 14px; height: 36px; line-height: 36px; padding: 0 28px; outline: none; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); will-change: background, box-shadow; -webkit-transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 30px; margin-bottom: 30px;
}
.button:active { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

Floating Material Input - Script Codes JS Codes

console.clear();
var inputField = document.querySelectorAll('.js-input-field');
var errorStateClass = 'input-field--error',	focusedStateClass = 'input-field--focused',	dirtyStateClass = 'input-field--dirty';
for(var i = 0, len = inputField.length; i < len; i++) {	(function(n) {	var input = inputField[n].querySelector('.js-input');	// On focus: apply --focused class	input.addEventListener('focus', function(event) {	console.log('run focus');	if(inputField[n].classList.contains(errorStateClass)) {	inputField[n].classList.remove(errorStateClass);	}	inputField[n].classList.add(focusedStateClass);	});	// On keydown: apply --dirty if there is atleast 1 character	input.addEventListener('keydown', function(event) {	console.log('keydown', this.value.length);	if(this.value.length === 0) {	inputField[n].classList.add(dirtyStateClass);	}	});	// If input length <= 0 remove --dirty	input.addEventListener('keyup', function(event) {	if(this.value === '') {	inputField[n].classList.remove(dirtyStateClass);	}	});	// Removing focus: if --dirty then animate only underline else animate label & underline	input.addEventListener('blur', function(event) {	event.preventDefault();	inputField[n].classList.remove(focusedStateClass);	if(this.value === '') {	inputField[n].classList.remove(dirtyStateClass);	}	});	})(i);
}
// Example textarea height grower
document.querySelector('.js-textarea').addEventListener('input', function(event) { this.style.height = ""; this.style.height = Math.min(this.scrollHeight, 300) + "px";
});
// Example Errors
document.querySelector('.js-error').addEventListener('click', function(event) {	event.preventDefault();	inputField[0].classList.add(errorStateClass);
});
Floating Material Input - Script Codes
Floating Material Input - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded October 08, 2022
Rating 3
Size 5,185 Kb
Views 16,192
Do you need developer help for Floating Material Input?

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!

Kyle Houston (styler) Script Codes
Name
Movie App - Detailed View - Adding a watchlist button - RESOLVED
Velocity eye blink
Meet the team
Circle border hover effect
Progressive Loading button
View Transition
Movie App - Watchlist - Creating a watchlist movie view RESOLVED
Word ticker
Velocity Rotate Test
STYLEAPP - Shopping Page Template
Create amazing captions 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!