Input with Watermark (css & Jquery)

Question

JS

$(document).ready(function () {
    $(\":input[data-watermark]\").each(function () {
        $(this).val($(this).attr(\"data-watermark\"));
        $(th         


        

Answer 1

Your desired behaviour of "Input with Watermark" has already been done - it's called the placeholder attribute. It works in modern browsers.

For older browsers, you should use a jQuery plugin to emulate placeholder for you.

Lastly, to set the colour, you need CSS similar to this:

.placeholder {
    color: #a8a8a8;
}
::-webkit-input-placeholder {
    color: #a8a8a8;
}
:-moz-placeholder {
    color: #a8a8a8;
}

Unfortunately, you can't combine the above rules; it won't work.