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

    How Can I Style the Hint Text?

    Asked by fitoutlab 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.

    Screenshot
    how how can i search field attached shown and
  • Profile Image
    JotForm Support

    Answered by mert 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

    Answered by fitoutlab 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
    JotForm Support

    Answered by mert 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.