How Can I Style the Hint Text?

  • Profile Image
    fitoutlab
    Asked on February 23, 2016 at 08:01 PM

    I would like to remove the text input fields and just have a cursor shown, with the example nut text in light grey which is overridden when someone types in the information. Is this possible? I have attached an example of a search field with the look I am trying to replicate - the cursor is flashing in this example.

  • Profile Image
    mert
    Answered on February 24, 2016 at 07:23 AM

    Hi there,

    Yes, you can achieve all of those objectives that you mentioned. Firstly, you need to create a "Text Box" field with "Hint Text":

     

    Then, we need to inject some custom CSS codes to achieve the objectives you want. Please, copy and paste the codes from the below:

     

    /.To make the cursor invisible when the input field is selected./

    :placeholder-shown{

    color:transparent;

    }

     

    /.To change the color of the hint text as light green./

    input::-webkit-input-placeholder {

    color: #96d27e !important;

    }

    input:-moz-placeholder { /* Firefox 18- */

    color: #96d27e !important;

    }

    input::-moz-placeholder {  /* Firefox 19+ */

    color: #96d27e !important;

    }

    input:-ms-input-placeholder {

    color: #96d27e !important;

    }

     

    Please, check live version of the results from the demo form below:

    https://form.jotform.com/60542134458958

     

     

    After trying these methods, please don't forget to let us know about the results.

    Thanks.

  • Profile Image
    fitoutlab
    Answered on February 29, 2016 at 11:46 PM

    Thank you for all the info, but it unfortunately didn't give me the look I was after. Appreciate your help though! I am just going to stick with a standard looking form for now.

  • Profile Image
    mert
    Answered on March 01, 2016 at 03:38 AM

    Hi again,

    You are most welcome. I checked the example form again and it shows the changes we made on both Firefox and Chrome. Please, check it from the below:

     

    Please make sure that you have used the following CSS codes:

     

    :placeholder-shown{

    color:transparent;

    }

     

    input::-webkit-input-placeholder {

    color: #96d27e !important;

    }

    input:-moz-placeholder {

    color: #96d27e !important;

    }

    input::-moz-placeholder {

    color: #96d27e !important;

    }

    input:-ms-input-placeholder {

    color: #96d27e !important;

    }

     

    For further assistance, please do let us know.

    Thanks.