Floating Label on Input Placeholder - html

Question

I've created a floating label on top of a text field. Once the text field has been focused or has values, the label will float. However, 1 text field needs to be disabled. And upon setting readonly to true to the text field, the label for that disabled text field doesn't float. Here's the jsfiddle link so that we can easily understand each other https://jsfiddle.net/omhre5c9/
<div class="form-row">
<div class="form-group col-md-3">
<input type="number" id="floor" class="form-control" required>
<label class="form-control-placeholder" for="floor">Floor</label>
</div>
<div class="form-group col-md-3">
<input type="number" id="unit" class="form-control" required>
<label class="form-control-placeholder" for="unit">Unit</label>
</div>
<div class="form-group col-md-6">
<input type="text" id="bldg" class="form-control" value="TEST BLDG" readonly="true">
<label class="form-control-placeholder" for="bldg">Building Name</label>
</div>
</div>

Answer 1

You need to add css selector for read only or disabled.
.form-control[readonly="true"] + .form-control-placeholder
Here is the updated fiddle:
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder,
.form-control[readonly="true"] + .form-control-placeholder{
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
<div class="form-row">
<div class="form-group col-md-3">
<input type="number" id="floor" class="form-control" required>
<label class="form-control-placeholder" for="floor">Floor</label>
</div>
<div class="form-group col-md-3">
<input type="number" id="unit" class="form-control" required>
<label class="form-control-placeholder" for="unit">Unit</label>
</div>
<div class="form-group col-md-6">
<input type="text" id="bldg" class="form-control" value="TEST BLDG" readonly="true">
<label class="form-control-placeholder" for="bldg">Building Name</label>
</div>
</div>,

Answer 2

You need to create a seperate class for transition in this case. Here is my answer.
HTML
<div class="form-row">
<div class="form-group col-md-3">
<input type="number" id="floor" class="form-control" required>
<label class="form-control-placeholder transition" for="floor">Floor</label>
</div>
<div class="form-group col-md-3">
<input type="number" id="unit" class="form-control" required>
<label class="form-control-placeholder transition" for="unit">Unit</label>
</div>
<div class="form-group col-md-6">
<input type="text" id="bldg" class="form-control" value="TEST BLDG" readonly="true">
<label class="form-control-placeholder" for="bldg">Building Name</label>
</div>
</div>,
CSS
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
opacity: 0.5;
}
.transition {
transition: all 200ms;
}
.form-control:focus + .transition,
.form-control:valid + .transition {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}