How to keep floating labels floating after input. Pure CSS

Question

I've successfully floated labels above form input fields when focused, but I'm stumped on how to keep the labels floating if text is entered into the field and un-focused.

There are tons of pure CSS examples online but none are clear to me what is keeping a filled field label floating. I'm sure it fairly easy but I'm fairly new to this.

EDIT: I need to do this without using the "required" method mentioned in the comments below. My form is a combination of required and non-required fields.

Here is one of many examples I've found: http://codepen.io/atunnecliffe/pen/gpKzQw

Here is my jsfiddle: https://jsfiddle.net/yzzxrsnn/1/

Many thanks in advance.

HTML:

<fieldset class="form-field">
<textarea maxlength="280" class="form-textarea"></textarea>
<label class="form-label" alt='Search Map' placeholder='Search Map'>Text Area</label>
<br>
<input type='text'  class="form-input" placeholder="" onclick='this.value = "";'>
<label class="form-label" alt='Search Map' placeholder='Search Map'>Text</label>
<br>
<select class="form-input" >
    <option value="" disabled selected hidden></option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
</select>
<label class="form-label" for="name">Select</label>
</fieldset>

CSS:

.form-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    height: 55px;
    margin: 15px 0 15px 0;
    padding: 0px 10px 0px 10px;
    border: 3px solid #ccc;
  outline: none;
    border-radius: 8px;
    outline: none;
  resize: none;
    text-align:left;
    -webkit-appearance: none;
    background: transparent;
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #000;
  background:#fff;
    font-size: 18px;
    -webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
    transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}

.form-input:focus {
  border-color: #00bafa;
}

.form-input + .form-label {
    display: block;
    pointer-events: none;
  margin:  0 0 0 15px;
    line-height: 0px;
    margin-top: -43px;
    margin-bottom: 43px;
  transition: transform 1s;

}

.form-label {
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #ccc;
    font-size: 18px;
}

.form-input:focus + .form-label {
  transform: translateY(-38px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #00bafa;
    font-size: 18px;
}

.form-textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    height: 150px;
    margin: 15px 0 15px 0;
    padding: 15px 10px 0px 10px;
    border: 3px solid #ccc;
    border-radius: 8px;
    outline: none;
  resize: none;
    text-align:left;
    -webkit-appearance: none;
    background: transparent;
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #000;
  background:#fff;
    font-size: 18px;
    -webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
    transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}

.form-textarea:focus {
  border-color: #00bafa;
}

.form-textarea + .form-label {
    display: block;
    pointer-events: none;
  margin:  0 0 0 15px;
    line-height: 0px;
    margin-top: -145px;
    margin-bottom: 145px;
  transition: transform 1s;
}

.form-textarea:focus + .form-label {
  transform: translateY(-30px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #00bafa;
    font-size: 18px;
}

.form-textarea + .form-label:before {
  transform: translateY(-38px);
  pointer-events: none;
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #00bafa;
    font-size: 18px;
}

Answer 1

You can do this by using jquery. Using jquery we can add class to a input and it's label if the value of that input is bigger than 0.

$(document).ready(function() {
    var $input = $('.form-input');

    $input.focusout(function() {
        if($(this).val().length > 0) {
            $(this).addClass('input-focus');
            $(this).next('.form-label').addClass('input-focus-label');
        }
        else {
        $(this).removeClass('input-focus');
            $(this).next('.form-label').removeClass('input-focus-label');

        }
    });
});

and some css

.input-focus-label{
    transform: translateY(-38px);
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    color: #00bafa;
    font-size: 18px;
}
.input-focus{
    border-color: #00bafa;
}

Here is a example fiddle.Hope this helps you.