<div class="container">
  		<div class="row justify-content-center">
			<div class="col-lg-5">
				<div>
					<div class="form-group input-wrapper">
						<label class="title-input">Nombre</label>
						<input type="text" class="form-control round-input">
					</div>
					<div class="form-group input-wrapper">
						<label class="title-input">Número de identificación</label>
						<input type="number" class="form-control round-input">
					</div>
					<div class="form-group input-wrapper">
						<label class="title-input">Correo electrónico</label>
						<input type="mail" class="form-control round-input">
					</div>
				</div>
			</div>
		</div>
</div>
//Roboto-condensed
@import url('//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap');

//Barlow
@import url('//fonts.googleapis.com/css?family=Barlow:300,300i,400,400i,500,500i,700,700i&display=swap');

// typography
$font-secondary: 'Barlow', sans-serif;
$roboto: 'Roboto Condensed', sans-serif;

$primary: #0033a0;
$secondary: #00aec7;
$warning: #e3e829;
$danger: #e4002b;
$info: #78be20;
$light: #ecf0f1;
$dark: #53565a;

//gray scale 
$gray: #e0e0e0;

$body-color: #212529; //body background
$cool-grey: #9ea2a2;
$ice-blue: #ecf0f1;
$white: #fff;

$shadow-input: 0 2px 20px 0 #e0e5f0;
$shadow-input-active: 0 2px 10px 0 rgba(0, 174, 199, .2);

body {
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 1rem;
	color: $dark;
	font-family: $font-secondary;
	font-weight: normal;
	font-style: normal;
	background-color:#ecf0f1;
	padding: 60px 0;
}

.form-group {
	position: relative;
	margin-bottom: 40px;

	label {
		font-size: 15px;
		color: $cool-grey;
		font-family: $roboto;

		&.error {
			font-size: 12px;
			color: $danger;
		}
	}

	input,
	textarea {
		&.form-control {
			min-height: 48px;
			border-radius: 5px;
			border: solid 1px $ice-blue;
			box-shadow: $shadow-input;
			font-size: 1rem;
			font-family: $font-secondary;
			font-weight: normal;
			color: $body-color;
			padding: 6px 20px 9px;

			&:disabled {
				background-color: $white;
				box-shadow: none;
				color: $gray;
				border-color: $gray;
			}

			&::placeholder { 
			  color: $cool-grey;
			}

			&:focus {
				border-color: $secondary;
				color: $secondary;
				box-shadow: $shadow-input-active;

				&::placeholder { 
				  color: $secondary;
				}
			}

			&.input-lg{
				min-height: 64px;
			}

			&.round-input {
				border-radius: 100px;
				padding: 6px 30px 9px;
			}

			&.error {
				border-color: $danger;
				color: $danger;
				box-shadow: none;

				+ label {
					margin-left: 20px;
					margin-bottom: 0;
				}

				&::placeholder { 
				  color: $danger;
				}
			}

			&.valid {
				background-position: calc(100% - 12px) center;
			}
		}
	}

	textarea {
		&.form-control { 
			min-height: 160px;
		}

		&.lg {
			min-height: 230px;
			padding: 20px;
		}
	}

	select {
		&.form-control {
			min-height: 48px;
			border: solid 1px $ice-blue;
			box-shadow: $shadow-input;
			font-size: 1rem;
			font-family: $font-secondary;
			font-weight: normal;
			color: $dark;
			border-radius: 25px;
			padding: 6px 30px 9px;
			-webkit-appearance: none;

			&:disabled {
				background-color: $white;
				box-shadow: none;
				color: $gray;
				border-color: $gray;
			}

			&::placeholder { 
			  color: $cool-grey;
			}

			&:focus {
				border-color: $secondary;
				color: $secondary;
				box-shadow: $shadow-input-active;

				&::placeholder { 
				  color: $secondary;
				}
			}
		}

		&.error {
			border-color: $danger;
			color: $danger;
			box-shadow: none;

			+ label {
				margin-left: 20px;
				margin-bottom: 0;
			}

			&::placeholder { 
			  color: $danger;
			}
		}

		&.minimal {
			background-image: url('https://icongr.am/fontawesome/angle-down.svg ');
			background-position: calc(100% - 16px) 13px;
			background-size: 22px;
			background-repeat: no-repeat;

		  	&:focus {
				background-image: url('https://icongr.am/fontawesome/angle-up.svg ');
				background-position: calc(100% - 16px) 10px;
				background-size: 22px;
				background-repeat: no-repeat;
			}
		}
	}
	
}

.input-wrapper {
	position: relative;
	line-height: 14px;
	margin: auto;
	margin-bottom: 0;
	margin-top: 20px;
	width: 100%;
	transition: all .3s;

	&.mar-top-40 {
		margin-top: 40px;
	}
	
	.title-input {
		color: $cool-grey;
		font-size: 1rem;
		position: absolute;
		z-index: 2;
		left: 20px;
		top: 17px;
		padding: 0 2px;
		pointer-events: none;
		transition: all 100ms ease;

		transform: translateY(0);

		&.empty-focus {
			color: $secondary;
			transform: translateY(-39px);
			font-size: 0.875rem;
		}

		&.empty {
			color: $primary;
			transform: translateY(-39px);
			font-size: 0.875rem;
		}
	}
}

.span-title {
    color: #0033a0;
    font-size: 0.875rem;
    margin-bottom: 7px;
    margin-top: 15px;
    margin-left: 16px;
    line-height: 1.3;
}

.inline-radio {
	display: flex;
	border-radius: 100px;
	border: 1px solid rgba(129, 137, 169, 0.2);

	div {
		position: relative;
		flex: 1;
	}

	input {
		width: 100%;
		height: 42px;
		opacity: 0;
		cursor: pointer;
	}

	label {
		position: absolute;
		top: 0; left: 0;
		color: #8189a9;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		margin-bottom: 0;
		background-color: transparent;
		transition: all .3s;
	}

	div:last-child label {
		border-right: 0;
	}

	input:checked + label {
		color: $secondary;
	    border-radius: 100px;
		box-shadow: 0 8px 20px 0 #ecf0f1;
		background-color: #ffffff;
	}
}
View Compiled
// label style inputs
// Added input value check on postback/load, removed floatLabel class from select input. Modified the scss, added color map.
function floatLabel(inputType){
	$(inputType).each(function(){
		var $this = $(this);
		var text_value = $(this).val();

		// on focus add class "active" to label
		$this.focus(function(){
			$this.prev().addClass("empty-focus");
			$this.parent().addClass("mar-top-40");
		});

		// on blur check field and remove class if needed
		$this.blur(function(){
			if($this.val() === '' || $this.val() === 'blank'){
				$this.prev().removeClass('empty-focus').removeClass('empty');
				$this.parent().removeClass("mar-top-40");
			}
			else {
				$this.prev().addClass("empty");
				$this.prev().addClass("empty-focus");
			}
		});
				
		// Check input values on postback and add class "active" if value exists
		if(text_value!=''){
			$this.prev().addClass("empty");
			$this.prev().addClass("empty-focus");
		}
	});

	// Automatically remove floatLabel class from select input on load
	$( "select" ).prev().removeClass('empty-focus').removeClass('empty');
	$( "select" ).parent().removeClass("mar-top-40");
}

floatLabel(".form-control"); 
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

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