How Can I Style the Hint Text?

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.

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.

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.

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.