My HTML has a placeholder like such:

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within')this.value='';" onblur="if (this.value=='')this.value='Search Within';">

It wasn't my choice and I can't really remove it... but I was wondering how I can set the CSS too... I want to do something like onfocus="if (this.value=='Search Within')this.value=''; $(this).css('color','000000');" and onblur="if (this.value=='')this.value='Search Within';$(this).css('color', 'A9A9A9');". How can I acplish that?

Thanks

My HTML has a placeholder like such:

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within')this.value='';" onblur="if (this.value=='')this.value='Search Within';">

It wasn't my choice and I can't really remove it... but I was wondering how I can set the CSS too... I want to do something like onfocus="if (this.value=='Search Within')this.value=''; $(this).css('color','000000');" and onblur="if (this.value=='')this.value='Search Within';$(this).css('color', 'A9A9A9');". How can I acplish that?

Thanks

• javascript
• jquery
• css
• onblur
• onfocus

5 Answers 5

You can use pseudo-selectors:

input[type=text]:focus {
  color: black;
}

input[type=text] {
  color: gray;
}

Actually, you pretty much provided the code with the exception of two mistakes:

1. You need a # before your colors.
2. You need to wrap your conditionals in braces

Everything else was fine (I changed the colors to make it more obvious what was happening):

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within'){this.value='';$(this).css('color','#00ff00');}" onblur="if (this.value==''){this.value='Search Within';$(this).css('color', '#ff0000');}">

http://jsfiddle/A4cuy/6/

Of course, this ends up being really ugly code and you are advised to put the javascript in separate handlers.

You can use the pseudo-class :focus for the color http://www.w3schools./cssref/sel_focus.asp

As for the "Search Within" thing, I remend using the defaultText jQuery plug-in

http://archive.plugins.jquery./project/defaultInputText

You can use the following

$('#additionalsearch')
.bind('focus',function(){
       if (this.value=='Search Within'){
             this.value='';
        };
        $(this).css('color','black')})
.bind('blur',function(){
       if (this.value==''){
          this.value='Search Within';
       }           
       $(this).css('color','gray')});

Tast this:

<input id="fldnm" style="background:#B6FF00" type="text" value="Search"
  onfocus="if(this.value=='Search'){this.value=''}this.style='background:#FF7F7F';"
  onblur="if(this.value==''){this.value='Search'this.style='background:#B6FF00';}else{};"
   />