How to edit HTML input value colour?

You can add color in the style rule of your input: color:#ccc;


Maybe something like this (just add your style):

<input type="text" 
       size="35" 
       value="Job Title e.g. Assistant Manager" 
       style="background-color:white; 
              border: solid 1px #6E6E6E;
              height: 30px; 
              font-size:18px; 
              vertical-align:9px;color:#bbb" 
        onfocus="if(this.value == 'Job Title e.g. Assistant Manager') {
                    this.value = '';
                    this.style.color='#000';
                 }" />

<input type="text" 
       name="searchterm" size="35" 
       style="background-color:white; 
              border: solid 1px #6E6E6E;
              height: 30px; 
              font-size:18px; 
              vertical-align:9px" />

UPDATE: Since placeholder attribute is very well supported on all major browsers, there is no need to do anything manually. Its possible to achieve the same thing with this:

<input type="text" 
       size="35" 
       placeholder="Job Title e.g. Assistant Manager" />

You can change the CSS color property using JavaScript in the onclick event handler (in the same way you change the value property):

<input type="text" onclick="this.value=''; this.style.color='#000'" />

Note that it's not the best practice to use inline JavaScript. You'd be better off giving your input an ID, and moving your JavaScript out to a <script> block instead:

document.getElementById("yourInput").onclick = function() {
    this.value = '';
    this.style.color = '#000';
}

Tags:

Html

Forms