CODEWITHSUNDEEP
cssformsinput
Genesis
Genesis

Reputation: 1347

Is it possible to change input value using CSS?

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?

Upvotes: 0

Views: 7847

Answers (2)

Farid Rn
Farid Rn

Reputation: 3207

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" />

Upvotes: 4

TheTodd
TheTodd

Reputation: 445

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

Upvotes: 2

Related Questions