Change label style when input has text

Question

I want to have my label hidden when the input hasn't been typed in because I have placeholder text but once it is typed in I want it to appear by changing the opacity.

label {
  display: block;
  color:rgba(146,20,34,0);
  text-align: left;
  margin: 0;
  padding-left: 12.2%;
  font-size: 75%;
}

<label for="name">Full Name</label>
<input type="text" name="name" placeholder="Full Name" id="name" value="">
<br>
<label for="customerNum">Customer Number</label>
<input type="number" name="customerNum" placeholder="Customer Number" value="">

You'll have to use JS, you can't check the value of an input with CSS — Jacob G, Dec 20 '16 at 13:18
Will I have to have separate functions for every input and its label or is there a way for it to detect the label for the input that is being typed in? — JDB, Dec 20 '16 at 13:20
Take a look at this http://stackoverflow.com/a/35593489/630203 answer.... actually wait that might be the wrong way around – you'd need to set the default styles as you want them with text, and then override when there is the text box is empty — Djave, Dec 20 '16 at 13:23
@JDB Can you explain this better by showing us some example? — Saurav Rastogi, Dec 20 '16 at 13:33
@SauravRastogi https://jsfiddle.net/notds6yw/ Here is it in jsfiddle, my guess is I will have to use javascript to detect it but I'm not as good at writing js yet. I also don't want to write a seperate function for each label and input since on my actual website there are about 8 more inputs. — JDB, Dec 20 '16 at 13:40
@Djave That is great if I am trying to change the input itself but I would like it to change the label. Is there a way to have the label detect if something is in the input? Then change its own style? — JDB, Dec 20 '16 at 13:41

score 1 · Accepted Answer · 2016-12-20T14:17:32.477

You only need to add a class/attribute to the label in order to determine if it is hidden or not. Then, with JS check if the input has typed in through input event.

const inputs = document.querySelectorAll('input[type="text"]');

[].forEach.call(inputs, input => {
  const label = document.querySelector(`[for="${input.id}"]`);
  input.addEventListener('input', function () {
 if (this.value && this.value.length > 0) {
     label.removeAttribute('hidden');
    } else {
     label.setAttribute('hidden', '');
    }
  });
});

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  padding: 50px 50px;
}
.group {
  display: inline-block;
  width: 200px;
}
.group label, .group input {
  display: block;
  font-family: 'open sans';
  transition: all .23s ease;
  width: 100%;
}
.group label {
  color: #555;
  font-size: 15px;
  font-weight: 600;
}
.group input {
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  font-size: 14px;
  height: 35px;
  margin-top: 5px;
  padding: 0 8px;
}
.group input:focus {
  border-color: #00bbff;
  box-shadow: 0 0 5px 1px rgba(0,188,255,.25);
  outline: none;
}
label[hidden] {
  opacity: 0;
  visibility: hidden;
}

<div class="group">
  <label hidden for="name">Full name</label>
  <input type="text" id="name" placeholder="Enter your full name">
</div>
<div class="group" style="float: right">
  <label hidden for="address">Address</label>
  <input type="text" id="address" placeholder="Enter address">
</div>

Thank you, that is exactly what I want. Is there an easy way to expand this to more inputs and labels or will I have to write a similar function for each and every one? — JDB, Dec 20 '16 at 13:57

score 1 · Answer 2 · answered Dec 20 '16 at 14:12

Here is a CSS only answer just as it may be of interest.

body{ padding:10px; }
input:placeholder-shown + label {
  border: 2px solid red; /* Red border only if the input is empty */
}

<input type="text" name="name" placeholder="Full Name" id="name" value="">
<label for="name">Full Name</label>
<br>
<input type="number" name="customerNum" placeholder="Customer Number" value="">
<label for="customerNum">Customer Number</label>

However, there is an issue that it relies on swapping the order of the input and label.

score 0 · Answer 3 · answered Dec 20 '16 at 13:41

Add a <script> tag inside your HTML and use the following javascript:

function setVisible(text) {
    var labels = document.getElementsByTagName("LABEL");
    for(var i = 0; i < labels.length; i++) {
         if(labels[i].innerHTML == text) {
             labels[i].style.color = "black";
         }
    }
}

Add an onchange attribute to your inputs:

onchange="setVisible(this.placeholder)"

Final result should look like this:

label {
  display: block;
  color:rgba(146,20,34,0);
  text-align: left;
  margin: 0;
  padding-left: 12.2%;
  font-size: 75%;
}

<label for="name">Full Name</label>
<input type="text" name="name" placeholder="Full Name" id="name" value="" onchange="setVisible(this.placeholder)">
<br>
<label for="customerNum">Customer Number</label>
<input type="number" name="customerNum" placeholder="Customer Number" value="" onchange="setVisible(this.placeholder)">

<script>
    function setVisible(text) {
    var labels = document.getElementsByTagName("LABEL");
        for(var i = 0; i < labels.length; i++) {
           if(labels[i].innerHTML == text) {
            labels[i].style.color = "black";
            }
        }
    }
</script>

Change label style when input has text

3 Answers3