CODEWITHSUNDEEP
jquerycssforms
Justin Meltzer
Justin Meltzer

Reputation: 13548

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)");
  }
}); 

$("form 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?

Upvotes: 2

Views: 5167

Answers (3)

jcane86
jcane86

Reputation: 681

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

Upvotes: 3

Thomas Shields
Thomas Shields

Reputation: 8942

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

Upvotes: 0

Blender
Blender

Reputation: 298076

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.

Upvotes: 2

Related Questions