Is it possible to change input value using CSS?

Question

Can I change an input field value using CSS when user clicks it?

Like:

<input type=text name=username>
<input type=password name=password>

So, when the user click into this field, the text will go away and he will be able to write something.

I have tried:

input[value="Input desired username here"] {
styles...
}

Any clues?

BTW, put your html attributes inside double-quotations. type=text must become type="text" and so on... — Farid Rn
– Farid Rn, Commented Mar 4, 2013 at 22:33

Farid Rn · Accepted Answer · 2013-03-04 22:40:32Z

4

There's no need to use css for this. You can use placeholder attribute for your input tag, it will show a default value in input boxes:

<input type="text" name="username" placeholder="Username" />

Please consider that placeholder attribute is not supported in all browsers and if you want to make it cross-browser you can write a javascript code to put a default value in your input-boxes or use this simple and quick fix:

<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />

edited Mar 4, 2013 at 22:40

answered Mar 4, 2013 at 22:30

Farid Rn

3,2076 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Genesis Over a year ago

Uhhh haaa!! You ROCKS! THANKS SO MUCH!

Genesis Over a year ago

Searching the internet = waste some hours / Post question on stackoverflow = waste a couple of minutes / Get the EXACT answer = PRICELESS! :)

Genesis Over a year ago

Not compatible? Damnit, too good to be real. Actually I was thinking about to make it using CSS url(img)...

Genesis Over a year ago

It seems that only versions < 10 of IE doesn't support this attribute, is it right?

Farid Rn Over a year ago

I've provided another solution. The second one is supported in most browser versions.

TheTodd · Accepted Answer · 2013-03-04 22:38:46Z

This is called a placeholder. Modern browsers will allow you to use a placeholder attribute like this:

<input type="text" name="username" placeholder="Input desired username here" />

and it will appear as you would like. Then you will need to utilize Modernizr to back port that functionality to older browsers. Something like this JavaScript will help:

$(document).ready(function () {
  if(!Modernizr.input.placeholder) {
    $('[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();
    $('[placeholder]').parents('form').submit(function () {
      $(this).find('[placeholder]').each(function () {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });
  }
})

Collectives™ on Stack Overflow

Is it possible to change input value using CSS?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related