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

  • Profile Image
    markashton
    Asked 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

     

  • Profile Image
    BDAVID
    Answered 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
    markashton
    Answered 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
    BDAVID
    Answered 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
    markashton
    Answered 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
    EltonCris
    Answered 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
    markashton
    Answered on October 12, 2015 at 09:52 AM

    EltonCris

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

    Thankyou

    Regards Mark

  • Profile Image
    Ben
    Answered 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.