<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>
body {
	background-color: #FFC650;
	text-align: center;
}

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

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

input[type="radio"] {
	display: none;
	+label {
		color: white;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		user-select: none;
		padding-left: 20px;
		padding-right: 20px;
		&::before {
			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%;
			transform: translate(-50%, 50%);
		}
		
		&::after {
			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%;
			transform: translate(-50%, 50%);
		}
	}
	&:checked + label{
		&::before {
			background-color: transparent;
			width: 40px;
			height: 40px;
			border-width: 2px;
		}
		
		&::after {
			width: 30px;
			height: 30px;
		}
	}
}


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

View Compiled

External CSS

  1. https://codepen.io/udyux/pen/jWMbjG

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js