CSS to make my placeholder text very light?

[theograd]

CSS to make my placeholder text very light?

I have a page at: http://rsatestamls.kaliocommerce.com/Register.aspx

Where I’d like to make my placeholder text very light. Like how it looks when you click into the field. But, I’m not sure how. Anyone mind sharing?

Thank you.

I do have a portion of JS to make the placeholders behave, too:

$(document).ready(function(){
    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
});

[Mod note] moved discussion to JavaScript Jungle.

[Paulie_D]

https://css-tricks.com/snippets/css/style-placeholder-text/

Not sure why JS is required.

[theograd]

The Javascript adds IE8-10 support of the placeholder element.

However, I have added that CSS, and nothing is happening. :/

As you can see here:
http://rsatestamls.kaliocommerce.com/Register.aspx

[TheDoc]

This doesn’t look right:

$('[placeholder]').focus(function() {

How can you focus a placeholder? I think you mean to use input.

[jamygolden]

It’s working in this pen: http://codepen.io/JamyGolden/pen/orAnv

That probably means that your script isn’t running for some or other reason. Try a console.log from that script area on your page and see if you get anything.

[Podders]

@theograd That script is not “Adding” support for placeholders in IE, it’s removing the native placeholder fuctionality from browsers that do actually support the placeholder attribute,

You should really be running a check to see if the browser supports placeholders before allowing this script to execute,

You can do this with a simple check by creating a input element then checking to see if that element natively has a placeholder attribute,

function supportPlaceholders(){
        var inp = document.createElement('input');
        return "placeholder" in imp;
}

So your script would become

$(document).ready(function(){
var ph = supportPlaceholders();
if(ph){
    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
});
}

function supportPlaceholders(){
    var inp = document.createElement('input');
    return 'placeholder' in imp;
}

This would then only run your script in browsers that do not support the placeholder

@thedoc The $('[placeholder]') selector is perfectly valid, it will return an object of all elements in the dom that actually have a placeholder attribute specified in the markup, of course to add input $('input[placeholder]') would make the selector more efficient but it is still valid all the same

[Author]

Posts