How to change the hint text / placeholder font color?

  • Profile Image
    mstaniszewski
    Asked on November 10, 2021 at 03:43 PM

    Hi! trying to make all the colours uniform! what is the default colour? is it   color : #8894ab; ? how to adjust just the colour of filler text? Not the answer colour.

    Just the initial highlight to put in number.

    Thank you!


    1636576874_618c2e6aebf52_

  • Profile Image
    VincentJay
    Answered on November 10, 2021 at 08:40 PM

    Hi,

    Are you referring to the phone number field (000) 000-0000?

    If yes, please let us know what color do you want and we will check if we can use custom CSS code to change the color.

    We'll wait for your response.

  • Profile Image
    mstaniszewski
    Answered on November 10, 2021 at 10:25 PM

    Yes! hoping to just get the colour of the filler text ! color : #8894ab;

  • Profile Image
    Nik_M
    Answered on November 11, 2021 at 03:46 AM

    Please add the following CSS code to the form:

    ::placeholder { 

      color: #8894ab !important;

    Related Guide: How to Inject Custom CSS Codes

  • Profile Image
    mstaniszewski
    Answered on November 11, 2021 at 08:52 AM

    Hi No change! did I put it in right?


    1636639438_618d22ce9e6fc_

  • Profile Image
    Carrissa_M
    Answered on November 11, 2021 at 09:35 AM

    Hello mstaniszewski,

    We appreciate your time sending us the result you've got when you try my colleague's CSS.

    To my understanding, what you like to change is the color of the text in Phone number field, right? If that's the case, you might want to try this code.

    color: #8894ab !important;

    Just include it on this specific line which is designated for the Phone number field.


    1636640770_618d28029f4d3_

    Hope this helps! Let us know if you need help.

  • Profile Image
    mstaniszewski
    Answered on November 11, 2021 at 09:43 AM

    Appreciate the response.. but what I need is to have the place holder text the same colour (just so it looks cleaner and nicer) is that possible?


    1636641772_618d2bec812b3_

  • Profile Image
    Gilbert_P
    Answered on November 11, 2021 at 10:18 AM

    Hello,

    I checked your form and it seems that the placeholder text color for the Phone Number field has been adjusted now to the same color as the other fields' placeholder.

    1636643796_618d33d40de5d_

    Are you still seeing the same placeholder color as the one on your initial screenshot? Let us know how it goes for you.

  • Profile Image
    mstaniszewski
    Answered on November 11, 2021 at 10:22 AM

    I see the problem now.. in Firefox it doesn't update.. in Google Chrome it's good..

    is there a code to adjust?


    1636644129_618d35214fb80_

  • Profile Image
    ashwin_d
    Answered on November 11, 2021 at 11:04 AM

    I would suggest you to please inject the following custom CSS code in your form and that should solve the issue you are having in Firefox browser:

    ::-webkit-input-placeholder {

      color: #8894ab !important;

    }

    :-moz-placeholder {  

      color: #8894ab !important;  

    }

    ::placeholder {

      color: #8894ab !important;  

     opacity: 1;

    }

    The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    Hope this helps.

    Do get back to us if you have any questions.

  • Profile Image
    mstaniszewski
    Answered on November 11, 2021 at 11:19 AM

    Thank you so much! that worked! really appreciated!


    1636647593_618d42a9b18a2_