In my input field (text), I have a text which disappears once it is clicked. How can I make this text a shade lighter by editing its colour?
Sorry, the code looks messy, I had to chop it up to show you.
Thanks!
James
<form>
<input type="text" name="search" size="35"
onclick="this.value='';"onfocus="this.select()"
onblur="this.value=!this.value?'Job Title
e.g. Assistant Manager':this.value;"
value="Job Title e.g. Assistant Manager"
style="background-color:white; border:
solid 1px #6E6E6E; height: 30px; font-size:18px;
vertical-align:9px"/>
<input type="text" name="searchterm" size="35"
style="background-color:white; border: solid 1px #6E6E6E;
height: 30px; font-size:18px; vertical-align:9px"/>
<input type="image" src="but.tiff" alt="Submit" width="60">
</form>
Please try this:
<input class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2" type="text" name="name" value="" placeholder="Your Name" style="background-color:blue;"/>
You basically put all the CSS inside the style part of the input tag and it works.
Add a style = color:black !important;
in your input type.
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';
}
You can add color in the style rule of your input: color:#ccc;
Source: Stackoverflow.com