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