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

    Targeting the Hint Colour on Text Box on FireFox Browser

    Asked by markashton on October 12, 2015 at 10:12 AM

    Hi,

    Have successfully changed the hint color on text-box fields with CSS ... except for Firefox!

    Form here: https://form.jotform.com/52812559863970

    CSS here:

    ::-webkit-input-placeholder {

        color : #888;

    }

     

    :-moz-placeholder {

        color : #888;

    }

     

    ::-moz-placeholder {

        color : #888;

    }

     

    :-ms-input-placeholder {

        color : #888;

    }

     

    Do you know how I could target Firefox as the colour is not changing.

    Many Thanks

    Regards Mark

    colour hint firefox browser target
  • Profile Image

    Answered by Ben on October 12, 2015 at 12:59 PM

    I took a look at your form above, but it seems that the colors are applied properly in input boxes - textbox'es but that the same can not be said for textarea.

    I do however see that the following CSS is changing the color of the hint:

    .form-custom-hint {
        color: #888 !important;
        padding-left: 15px;
        padding-top: 15px;
    }

    - which has a bigger importance than the following:

    .form-custom-hint {
        color: #aaa !important;
        overflow: hidden !important;
    }

    Now, to test this, I have placed the following CSS:

    textarea.form-custom-hint, *::-moz-placeholder {
        color: red !important;
    }

    and it is working properly for me (as you can see here):

    As you can see it goes through 3 different stages:

    1. original

    2. after applying the above CSS

    3. after applying the same code as mentioned by my colleague Elton on the previous thread.

    Based on your other threads that I saw, I know that you are familiar with these things, so I think that the issue here is likely the version of FireFox as it might need some other code for it, so I would appreciate if you could let us know what is the FIreFox version where the placeholders did not change the color for you so that we can inspect it for you.

    - The above was on FireFox 32.0

  • Profile Image

    Answered by markashton on October 12, 2015 at 01:19 PM

    The hint on text-area is fine in all browsers. I've targeted and changed that already ... it doesn't use same class as text-box

    The hint on text-boxes is the issue. It is fine unless you look in FF in which we can see that FF is not picking up the CSS that is stating be this color: #888

    There is no issue with text areas ... just textbox hint colour on FF

    Can you see the issue.

    Have tested on all versions of FF including latest 41.01

  • Profile Image

    Answered by Ben on October 12, 2015 at 02:40 PM

    Unfortunately for me it is working fine in Firefox. Firefox is also the first and only browser that I like to use, and the code:

    *::-moz-placeholder works properly for it.

    To make sure that it is working, I cloned your form and have applied different color for each textbox (input) field.

    This is the form: http://form.jotformpro.com/form/52845574225965

    this is what I see when I open the same:

    This is the code that I have used:

    #input_7::-moz-placeholder {
        color: blue;
    }
    #input_3::-moz-placeholder {
        color: white;
    }
    #input_4::-moz-placeholder {
        color: red;
    }

    Please do let us know if you see different colours set on your end (the colors are Blue, White and Red).

  • Profile Image

    Answered by markashton on October 12, 2015 at 05:19 PM

    You are correct.

    However, the reason it is fainter is because the opacity is not set at 1

    I applied this css that corrected what I was seeing

     

    ::-moz-placeholder {

        color : #888;

        opacity: 1;

    }

     

    Thanks for your help though

    Mark

     

  • Profile Image
    JotForm Support

    Answered by jonathan on October 12, 2015 at 06:28 PM

    Hi Mark,

    I checked the form https://form.jotform.com/52812559863970 in my Firefox browsr and this is how it looks.

    I assume this is working now also in your Firefox browser?

    Please let us know if still not.

     

    Thanks.

     

     

  • Profile Image

    Answered by markashton on October 13, 2015 at 06:11 AM

    Yes. In Firefox there is some opacity thing going on ... which is corrected by CSS.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 13, 2015 at 09:13 AM

    On behalf of my colleagues, you are welcome. If you have any other concern or question, please feel free to contact us again.