CODEWITHSUNDEEP
html
jejerome
jejerome

Reputation: 168

Floating Label on Input Placeholder

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>

Upvotes: 1

Views: 2590

Answers (2)

Zabih Ullah
Zabih Ullah

Reputation: 605

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;
}

Upvotes: 0

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

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>,

Upvotes: 3

Related Questions