Saturday, November 6, 2010

change text color css onfocus onblur

this one seemed tricky but actually pretty simple, thought this code may look a bit clustered I admit there's probably a neater way since I only needed one place with this I didn't bother cleaning, if you do don't forget to hit me about it!

<input type="text" name="search" class="search" size="15" value="Search..." onKeyPress="if(event.keyCode == 13){ search() }" onblur="if(this.value==''){this.value='Search...'; this.className = 'unfocused';}; " onfocus="this.className = 'focused'; if(this.value=='Search...'){this.value=''};" />

This adds on to the previous post about search input text that will display "search..." and disappear when clicking it, this addition makes the text gray and back to black when use types into the box (on focus)

heres the css:

.search{
color:gray;
}
.focused {
color:black;
}

try it out and let me know how it goes!

1 comment:

Anonymous said...

Thanks for sharing, worked for me. I am a noob to coding and people like you are what make the internet wonderful!