/ Material Design

Material input with no JS

Material input with no JS

Material input

Material input with no JS.

Made with

Html
Css/stylus

Html

<section class="page-section">
		<div class="page-section-wrapper">
				<header class="page-section-header">
						<h1 class="page-section-header-title">Stay Tuned for Updates</h1></header>
				<div class="page-section-content">
						<form action="/" method="POST" class="material-form">
								<section class="material-form-field">
										<div class="material-form-field-controls">
												<div class="form-field-controls-group">
														<input type="email" id="email" required="required" placeholder="Email" title="Please enter Email" class="material-form-field-input">
													<label for="email" class="material-form-field-label">Email</label>
												</div>
										</div>
								</section>
						</form>
				</div>
		</div>
</section>

Css

$materialInputPadding ?= 0.5em
$materialInputWidth ?= 25em
$materialInputFontSize ?= 1.5em
$materialInputColour ?= white

/* -- import Roboto Font -- */
@import url("//fonts.googleapis.com/css?family=Roboto400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic")

$fontFamily ?= "RobotoDraft", "Roboto", "Helvetica Neue, Helvetica, Arial", sans-serif
	
// the meat of CSS
.material
	&-form
		&-field
			position relative
			max-width $materialInputWidth
			margin 0 auto
			&-input
				&::-webkit-input-placeholder
					font-family $fontFamily
					color transparent
				padding $materialInputPadding 0
				font-size $materialInputFontSize
				color inherit
				font-family inherit
				width 100%
				background transparent
				border-width 0 0 1px 0
				transition 0.4s ease border-color
				&:focus
					&:valid, &:invalid
						border-bottom-width 2px
					&:valid
						border-color green
					&:invalid
						border-color red
				&:focus, &[value], &:valid
					&::-webkit-input-placeholder
						color transparent
					& + .material-form-field-label
						transform translateY(-1.1em)
				& + .material-form-field-label
					transition 0.4s ease all
					cursor pointer
					transform translateY(0)
					font-size $materialInputFontSize
					left 0
					top $materialInputPadding * 1.1
					position absolute
					color $materialInputColour
				&:focus
					outline none
		& + label
			position absolute
			left 0.5em
// strictly for the demo
body
	font-family $fontFamily
	background #3AADFF
	color white
.page
	&-section
		min-height 100vh
		&-header
			width 100%
			&-title
				font-size 2.5em
				margin-bottom 1em
				font-weight 300
		&-wrapper
			width 100%
			padding 10%
			box-sizing border-box
		display flex
		flex-wrap wrap
		align-items center
		text-align center

Author

Sean Goresht

Demo

See the Pen Material Input by Sean Goresht (@srsgores) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More