How do I style the placeholder text inside a field?

I have this jquery code that handles the logic of placeholder text for two input fields:

$(document).ready(function() {

$("form input.link").attr("value", "Media Link Here (optional)");
$("form input.email").attr("value", "*Email Address Here");

$("form input.link").live("focus", function() {
    if ( $(this).val() == "Media Link Here (optional)"){
    $(this).val("");
  }
});

$("form input.email").live("focus", function() {
    if ( $(this).val() == "*Email Address Here"){
    $(this).val("");
  }
});

$("form input.link").live("focusout", function() {
    if ( $(this).val() == "" ){
    $(this).attr("value", "Media Link Here (optional)");
  }
}); 

$("fo开发者_Python百科rm input.email").live("focusout", function() {
    if ( $(this).val() == "" ){
    $(this).attr("value", "*Email Address Here");
  }
});

});

I want to style the placeholder text so that it has a different styling than the text that the user types into the field. How can I do this?

---

EDIT: misread the question and thought you were using the placeholder html attribute. Now I see you aren't, and should use the other answers here instead, but I'll leave my answer just in case you want to use the placeholder attribute.

Placeholder styling isn't still widely implemented, so you will have to use vendor prefix properties:

::-webkit-input-placeholder {
    color: red;
}

:-moz-placeholder {
    color: red;
}

HERE is a nice article on css selectors for placeholders and it's adoption in the different browsers.

Cheers

---

Give the textbox a special class which goes away upon focus() and gets added upon blur() if there's no content.

.placeholder {
  color: gray;
  font-style: italic;
}

$('.box').focus(function() {
  if (this has default text) {
    $(this).val('');
    $(this).removeClass('placeholder');
  }
});

And add the class when the user blurs and the text is default.

---

have you tried...

$("form input.email").live("focus", function() {
if ( $(this).val() == "*Email Address Here"){
$(this).css("cssvalueyouwant", "value you want to set");  //set to normal
$(this).val("");  }});
$("form input.email").live("focusout", function() {
    if ( $(this).val() == "" ){
    $(this).attr("value", "*Email Address Here");
    $(this).css("cssvalueyouwant", "value you want to set");   //set to special
}});