WordPress.org

1. object81
   Member
   Posted 7 months ago #

   Is it somehow possible to have labels showing inside the text-box, then disappear when text-box is clicked?
   This is the case in the Twenty Eleven Themes Comment Form. I would love to see that in my Contact Form to offer my Users a unified experience.

   I tried a bit by tweaking CSS id and class, but I'm no Expert here. Maybe someone has an idea.
   Thanks.

   http://wordpress.org/extend/plugins/contact-form-7/

2. Takayuki Miyoshi
   Member
   Posted 7 months ago #

   Yes, when your text field tag is like this:

   [text your-name "John Smith"]

   Add watermark option to it:

   [text your-name watermark "John Smith"]

3. object81
   Member
   Posted 7 months ago #

   Thanks for your answer. But this isn't was I meant. The Watermark option enables pre-filled text in the Text-box. But I want I label in the upper-left corner of the Text-box. Please look at the Twenty Eleven Theme to see what I mean (http://wordpress.org/extend/themes/twentyeleven Preview > Find Comment Form).

4. Takayuki Miyoshi
   Member
   Posted 7 months ago #

   Ok, I checked the twentyeleven comment form. It seems that this CSS style in style.css does the trick:

   #respond input[type="text"]:focus, #respond textarea:focus {
       text-indent: 0;
       z-index: 1;
   }

   The label has the same 'z-index: 1', and the input field comes after the label. So when you focus the input field, 'z-index: 1' is set to it, thus the input field gets shown upper than the label.

Reply

You must log in to post.