Change font-color of placeholder span on input focus

Question

I have an input field with a span placeholder inside of it. What I\'d like to do is change the color of the placeholder when the input field is clicked. Here is a jsFiddle with

Answer 1

I know this is different to the way you've approached it, but if what you're trying to do is remove the holder text on focus, you could always use this here

What it does is read the text from your inputs title attribute, you set the color of the default text in your css and then when you focus/blur it adds/removes text, unless there is a value, then the users value stays there rather then the default text.

HTML

CSS

input { margin: 10px; padding: 5px; }

.defaultTextActive { color: #000; }

jQuery

$(".defaultText").focus(function(srcc) {

    if ($(this).val() == $(this)[0].title) {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }

});

$(".defaultText").blur(function() {

    if ($(this).val() == "") {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }

});

$(".defaultText").blur();