16

Is there any way I can clear placeholder text on focus in Chrome, Firefox clears the text on focus but Chrome doesn't.

This confuses the user whether the text in the bar is typed, or it's a placeholder text (Even if I changed the text color to light grey), I don't want to use unnecessary JavaScript or jQuery for this, I want to know if there's some HTML/CSS solution for this

Demo Fiddle

Chrome Preview (On Focus)

Chrome Preview On Focus

Firefox Preview (On Focus)

Firefox Preview On Focus

Improve this question
7
  • 4
    Don't touch the user expected behavoir!
    – Ron van der Heijden
    Commented Oct 10, 2012 at 14:27
  • 9
    @Bondye It is actually annoying if the text doesn't get cleared on focus..
    – Mr. Alien
    Commented Oct 10, 2012 at 14:27
  • 3
    I think is more annoying if the text DOES get cleared on focus. Because he don't attach a label or name to the input. So when I focus I don't know what I focus...
    – Ron van der Heijden
    Commented Oct 10, 2012 at 14:29
  • @Bondye I do show them on which field they are so no question of not knowing what a user is focusing at ;)
    – Mr. Alien
    Commented Oct 10, 2012 at 14:32
  • Why do you use a placeholder then?
    – Ron van der Heijden
    Commented Oct 10, 2012 at 14:33

5 Answers 5

Reset to default
48

Try using

input:focus::-webkit-input-placeholder 
{
    color: transparent;
}

It will resolve the issue. The text is visible on focus because of the auto focus on page load.

Improve this answer
3
  • 3
    There you go, CSS always has a solution for everything ;)
    – Mr. Alien
    Commented Oct 10, 2012 at 14:33
  • 5
    cough using hacky browser specific tags cough :)
    – Eonasdan
    Commented Oct 10, 2012 at 14:41
  • it was great :) I must use it with !important tag after that it works good
    – András
    Commented Aug 16, 2013 at 7:55
27

Now firefox works in other way, so I used this code:

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}
Improve this answer
1
  • 1
    a 2 year later, of this question, i font that this is the one that works best
    – Vfleitao
    Commented Sep 1, 2014 at 14:30
3

This is how chrome handles it, and chrome users will probably expect it to be handled like this. You could, however, use jQuery to remove the "placeholder" attribute when it is focused on.

I found an apparent fix for you, from a google group @ https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018

// Fixing Webkit that not clearing input/textarea when get focus
$(function(){
  if ($.browser.webkit) {
    $('input, textarea').on('focus',function(){
      if ( $(this).attr('placeholder') ) $(this).data('placeholder', $(this).attr('placeholder')).removeAttr('placeholder');
}).on('blur', function(){
        if ( $(this).data('placeholder') ) $(this).attr('placeholder', $(this).data('placeholder')).removeData('placeholder');
    });
  }
});
Improve this answer
2
  • This answer deserves attention, it's browser-compatible while others are '-webkit-' specific.
    – Milche Patern
    Commented Sep 25, 2014 at 17:46
  • $.browser has been deprecated for a looong time already. In order to still use it you need to load jQuery's migrate script after the core jQuery library. I'd recommend the CSS fix instead.
    – Heraldmonkey
    Commented Jun 2, 2015 at 14:13
-1

I found that the Shubhanshu's solution didn't work for me, but I did find this on CSS tricks that did work in Chrome, doesn' seem to work in FF though.

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}
Improve this answer
-2 

input:hover::placeholder 
{
  color: transparent;
}
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.