How can you change the color of a label in a form?

Question

I have the following code,

HTML

<label for="fName">First Name<sup>*</sup></label>
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>

JavaScript

var fName = document.getElementById("fName");
fName.label.style.color="red";

Is this a valid way to change the color or the label or does it need it's own id?

Thanks for the help! Clarification, the color needs to change if the field is empty on the form submit.

Answer 1

Your code is valid for changing attribute color. But I don't think your code will change colour of your label. If this style unique for that element you can use a id for label and make same kind script to change color for label too. I think it would be great if you define a class in css and add this class name using JavaScript,Code for that follows.

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

If your can use jQuery framework. It will save lots of time.

Answer 2

Check out this very complete answer: Javascript change color of text and background to input value

Answer 3

I believe that there is not any short and direct way to access the attached label corresponding to an input field using javascript. You can access the attached label via CSS (with some tweaks in layout) but in javascript, you have to set up a few lines of code. To use this code, the layout also has a requirement that all the attached label should go before the input field (spaces in between are allowed). This code just use the previousSibling property of a DOM element with some other DOM stuffs. Here is the detail:

function getLabelFromInputID(inputID){
   var prevSib = document.getElementById(inputID).previousSibling;
   //remove the spaces if any exists
   while(prevSib.nodeName=='#text') prevSib=prevSib.previousSibling;
   if(prevSib.getAttribute('for') != inputID) prevSib = null;
   return prevSib;
}

Use the getLabelFromInputID function to access the attached label from the corresponding input field's ID. Note that the label should have for attribute set-up correctly (this is the standard and common practice).

Here is the Fiddle Demo. In this demo, you just try clicking on the page to see it in action.

Answer 4

using css

form label{color:red};

using javascript

<label for="fName" class="lbl">First Name<sup>*</sup></label>
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js></script>
<script>
    $(document).ready(function() {
       $('.lbl').css('color','red');
    });
</script>

or simple javascript

document.getElementsByClassName("lbl").style.color="red";

Answer 5

This all depends on your use case. If you are simply trying to style the element red statically, you should define a css class (e.g. `red-label { color: red; }) and apply that class to the label.

If you are trying to dynamically set the color to red (e.g. upon a form validation error), you'll need to target the label using a query selector of some sort.

function makeLabelRedDirectly() {
  document.getElementById('fNameLabel').style.color = 'red';
}

function makeLabelRedViaClass() {
  // Note you can use the more robust `element.classList` with modern browsers
  // document.getElementById('fNameLabel').classList.add('red-label');
  document.getElementById('fNameLabel').className += ' red-label' ;
}

The examples above use document.getElementById to target the element. You could also opt to use document.querySelector or a library like jQuery to target the labels.

Working example: http://jsbin.com/calol/1

Answer 6

An input element does not have a label property or another way to directly refer to its label. You need to assign an id to the label element or otherwise find a way to access it. You could traverse all label elements on a page and use the one with a for property matching the input element, but it’s probably easier to just use id for it.