.input-class {
    position: relative;
    display: inline-block;
    margin: 20px 0px;
}

.slide-up {
    display: inline-block;
    color: #006da6;
    background: #efefef;
    border: 0;
    border-radius: 3px !important;
    outline: 0;
    text-indent: 80px;
    transition: all 0.3s ease-in-out;
}

.slide-up::-webkit-input-placeholder {
    color: #efefef;
    text-indent: 0;
    font-weight: 300;
}

.slide-up+label {
    display: inline-block;
    position: absolute;
    transform: translateX(0);
    top: 0;
    left: 0;
    padding: 5px 15px;
    text-shadow: 0 1px 0 rgba(19, 74, 70, .4);
    transition: all 0.3s ease-in-out;
    border-top-left-radius: 6px;
    overflow: hidden;
}

.slide-up+label:before,
.slide-up+label:after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.slide-up+label:before {
    top: 6px;
    left: 5px;
    right: 5px;
    bottom: 6px;
    background: #006da6;
}

.slide-up+label:after {
    top: 0;
    bottom: 0;
    background: #006da6;
}

span:nth-child(1) .slide-up {
    text-indent: 105px;
}

span:nth-child(3) .slide-up {
    text-indent: 125px;
}

span:nth-child(1) .slide-up:focus,
span:nth-child(1) .slide-up:active,
span:nth-child(3) .slide-up:focus,
span:nth-child(3) .slide-up:active {
    text-indent: 0;
}

.slide-up:focus,
.slide-up:active {
    color: #006da6;
    text-indent: 0;
    background: #fff;
}

.slide-up:focus::-webkit-input-placeholder,
.slide-up:active::-webkit-input-placeholder {
    color: #aaa;
}

.slide-up:focus+label,
.slide-up:active+label {
    transform: translateY(-100%);
}

.slide-up:focus+label:before,
.slide-up:active+label:before {
    border-radius: 5px;
}

.slide-up:focus+label:after,
.slide-up:active+label:after {
    transform: translateY(100%);
}