What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Targeting the hint property of a Text Box to make it disappear on cursor entry.

    Asked by markashton on October 10, 2015 at 02:57 PM

    If I want to change the hint properties of a textbox field am I correct that the CSS would be as follows ... 

     

    ::-webkit-input-placeholder {

    color: #888;

    padding-left : 15px;

    }

     

    :-moz-placeholder {

    color: #888;

    padding-left : 15px;

    }

     

    ::-moz-placeholder {

    color: #888;

    padding-left : 15px;

    }

     

    :-ms-input-placeholder {

    color: #888;

    }

     

    Can I ask is there a more simple way of targeting the hint property of a textbox ... this seems overkill.

    The text area hint uses one class: .form-custom-hint

    Why is the textbox hint not the same?

    Many Thanks

    Regards mark

     

    textbox hint thanks properties
  • Profile Image
    JotForm Support

    Answered by BDAVID on October 11, 2015 at 01:58 PM

    They should use same class, I noticed the hint for Text Boxes acts as a bit different, the text should disappear when you click on it, as it does when you click on Text Area:

     

    I will report this, so they can make to target all hints(for Text Boxes and Text Areas) with the same class.

  • Profile Image

    Answered by markashton on October 11, 2015 at 02:00 PM

    Thanks BDavid ... but that could happen in 2 years time ... you know that as much as me.

    Currently ... how do I target the hint on a text box ... to make it disappear.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by BDAVID on October 11, 2015 at 02:23 PM

    Use the same custom CSS to target a hint of a Text Box:

    ::-webkit-input-placeholder {

    (here goes the property)

    }

     

    :-moz-placeholder {

    (here goes the property)

    }

     

    ::-moz-placeholder {

    (here goes the property)

    }

     

    :-ms-input-placeholder {

    (here goes the property)

    }

    To make it disappear, add this :  display:none !important;

    Example:

    ::-webkit-input-placeholder {

    display:none !important;

    }

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by markashton on October 11, 2015 at 04:53 PM

    Eh?

    When I say make it disappear ... i don't mean not display it at all ... if that was the case you wouldn't bother adding a hint at all would in the first place would you?

    What I mean is ... how do you make it disappear on entering the cursor ... just like a text area does?

    You know that's the point of this post because you posted above with the animated screenshot!

    So, I'm looking for the same behaviour as the text area i.e. disappear on cursor entry. How would you target that?

    Is there a property I can target

    Many Thanks Regards Mark

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 11, 2015 at 11:52 PM

    @Mark

    Thanks for the clarification. You can achieve that with CSS using transparent color on input focus. You can use the following.

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

    input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */

    input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */

    input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

     

    Demo: https://form.jotform.com/52838860089973?

    Cheers!

  • Profile Image

    Answered by markashton on October 12, 2015 at 09:52 AM

    EltonCris

    You are a genius and deserve to become very wealthy ;-)

    Thankyou

    Regards Mark

  • Profile Image

    Answered by Ben on October 12, 2015 at 12:05 PM

    In my colleague's name, you are welcome :)

    I am glad to see that the issue is resolved, and as you are already familiar, once our developers look into this they will update you about this through on this thread once no extra steps are needed.