SOURCE

<form>
	<section class="input-container">
		<label>
		<input type="text" placeholder="input–1" name="product_name">
		<span>input–1</span>
		</label>
	</section>
	
	<fieldset>
		<input type="radio" name="radio1" id="radio-1" value="radio-1"/>
		<label for="radio-1">radio–1</label>

		<input type="radio" name="radio1" id="radio-2" value="radio-2" checked="checked"/>
		<label for="radio-2">radio–2</label>
		
		<input type="radio" name="radio1" id="radio-3" value="radio-3"/>
		<label for="radio-3">radio–3</label>
	</fieldset>
</form>

/*------------∞
|  reset.css  |
∞------------*/
/* ∞∞ postcss ∞∞ */

/* ∞∞ font ∞∞ */
@import url(https://fonts.googleapis.com/css?family=Lato:300,900);
body {
	font-family: 'Lato', sans-serif;
}
/* ∞∞ global ∞∞ */
	* {
		position: relative;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border-color: inherit;
	}

	body {
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
		font-size: 100%;
		font-style: normal;
		font-weight: 300;
		line-height: 1;
		margin: 0;
		padding: 0;
	}
	
/* ∞∞ text styling ∞∞ */
	h1, h2, h3, h4, h5, h6, p, em, a, b, strong {
		font-style: normal;
		font-weight: 300;
	}

	strong {
		font-size: 1.15em;
	}

	small {
  	font-size: .85em;
	}

	ul,
	ol,
	menu {
		list-style: none;
	}

	sub,
	sup {
  	font-size: .75em;
  	line-height: 0;
  	position: relative;
  	vertical-align: baseline;
	}
	
	sup {
  	top: -0.5em;
	}
	
	sub {
  	bottom: -0.25em;
	}

	code,
	kbd,
	pre,
	samp {
  	font-family: monospace, monospace;
  	font-size: 1em;
	}

	abbr[title] {
  	border-bottom: 1px dotted;
	}
	
	dfn {
  	font-style: italic;
	}

/* ∞∞ form elements ∞∞ */
	button,
	input,
	optgroup,
	select,
	textarea {
  	color: inherit;
  	font: inherit;
  	margin: 0;
  	background: transparent;
		outline: none;
		border: none;
		border-radius: 0;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}
	
	button,
	select {
  	text-transform: none;
  	cursor: pointer;
	}

	button[disabled],
	html input[disabled] {
  	cursor: default;
	}
	
	fieldset {
  	border: none;
  	margin: 0;
  	padding: 0;
		min-width: 0;
	}

	textarea {
		resize: none;
	}

/* ∞∞ link styling ∞∞ */
	a {
		display: inline;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
	}

	a:active,
	a:hover {
  	outline: 0;
	}

	/* a::before {
		width: 100%;
		height: .2rem;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #7ac;
	}

	a:hover::before {
		background-color: #49e;
		height: .35rem;
	} */

/* ∞∞ hr using box ∞∞ */
	hr {
		border: none;
  	box-sizing: border-box;
  	height: .075rem;
	}

/* ∞∞ hidden ∞∞ */
	[hidden],
	template {
  	display: none;
	}

/* ∞∞ media specific ∞∞ */
	audio:not([controls]) {
  	display: none;
  	height: 0;
	}

/* ∞∞ tables ∞∞ */
	table {
  	border-collapse: collapse;
  	border-spacing: 0;
  	border: none;
	}

	td,
	th {
		margin: 0;
  	padding: 0;
  	font-weight: inherit;
		text-align: inherit;
	}


/*====================================================== ∞∞ browser specific ∞∞ */

/* ∞∞ IE ∞∞ */
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	main,
	menu,
	nav,
	section,
	summary {
  	display: block;
	}
	
	audio,
	canvas,
	progress,
	video {
  	display: inline-block;
  	vertical-align: baseline;
	}

	a {
  	background-color: transparent;
	}

	button {
  	overflow: visible;
	}

	html {
  	-ms-text-size-adjust: 100%;
	}

	img {
  	border: none;
	}

	input[type="checkbox"],
	input[type="radio"] {
  	box-sizing: border-box;
  	padding: 0;
	}

	legend {
  	border: none;
  	padding: 0;
	}

	mark {
  	background: #ff0;
  	color: #000;
	}

	svg:not(:root) {
  	overflow: hidden;
	}

	textarea {
  	overflow: auto;
	}

/* ∞∞ moz ∞∞ */
	body {
		-moz-osx-font-smoothing: grayscale;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
  	border: none;
  	padding: 0;
	}

	input {
  	line-height: normal;
	}

/* ∞∞ webkit ∞∞ */
	* {
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
	}

	html {
  	-webkit-text-size-adjust: 100%;
	}

	body {
		-webkit-font-smoothing: antialiased !important;
	}

	blockquote {
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
	}

	fieldset {
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		-webkit-padding-before: 0;
		-webkit-padding-start: 0;
		-webkit-padding-end: 0;
		-webkit-padding-after: 0;
	}

	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button { 
  	-webkit-appearance: none; 
  	margin: 0; 
  	height: auto;
	}

	input[type="search"] {
  	-webkit-appearance: textfield;
  }

  input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration,
	progress {
  	-webkit-appearance: none;
	}
body {
	background-color: #FFC650;
	text-align: center;
}

form {
	background-color: #FFC650;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	width: 550px;
	height: 270px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}

/* radio */
fieldset {
	width: 100%;
	text-align: center;
}

input[type="radio"] {
	display: none;
}

input[type="radio"] +label {
	color: white;
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	padding-left: 20px;
	padding-right: 20px;
}

input[type="radio"] +label::before {
	-webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
	transition: all 250ms cubic-bezier(.4,.25,.3,1);
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: white;
	border: 0px solid white;
	font-size: 0;
	position: absolute;
	bottom: 275%;
	left: 50%;
	-webkit-transform: translate(-50%, 50%);
	        transform: translate(-50%, 50%);
}

input[type="radio"] +label::after {
	-webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
	transition: all 250ms cubic-bezier(.4,.25,.3,1);
	content: "";
	width: 0;
	height: 0;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	bottom: 275%;
	left: 50%;
	-webkit-transform: translate(-50%, 50%);
	        transform: translate(-50%, 50%);
}

input[type="radio"]:checked + label::before {
	background-color: transparent;
	width: 40px;
	height: 40px;
	border-width: 2px;
}

input[type="radio"]:checked + label::after {
	width: 30px;
	height: 30px;
}


/* input */
section.input-container label {
	position: relative;
	display: block;
}
section.input-container label input {
	display: block;
	padding: 20px;
	width: 300px;
	margin-bottom: 10px;
	outline: none;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background-color: white;
	font-weight: bold;
	color: #FF7975;
}
section.input-container label input::-webkit-input-placeholder {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #D3D3D3;
	font-weight: bold;
}
section.input-container label input::-moz-placeholder {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #D3D3D3;
	font-weight: bold;
}
section.input-container label input:-ms-input-placeholder {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #D3D3D3;
	font-weight: bold;
}
section.input-container label input::placeholder {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #D3D3D3;
	font-weight: bold;
}
section.input-container label input:focus, section.input-container label input.populated {
	padding-top: 28px;
	padding-bottom: 12px;
}
section.input-container label input:focus::-webkit-input-placeholder, section.input-container label input.populated::-webkit-input-placeholder {
	color: transparent;
}
section.input-container label input:focus::-moz-placeholder, section.input-container label input.populated::-moz-placeholder {
	color: transparent;
}
section.input-container label input:focus:-ms-input-placeholder, section.input-container label input.populated:-ms-input-placeholder {
	color: transparent;
}
section.input-container label input:focus::placeholder, section.input-container label input.populated::placeholder {
	color: transparent;
}
section.input-container label input:focus + span, section.input-container label input.populated + span {
	opacity: 1;
	top: 10px;
}
section.input-container label span {
	font-size: .8rem;
	color: #A9A9A9;
	position: absolute;
	top: 0px;
	left: 20px;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}