Targeting the Hint Colour on Text Box on FireFox Browser

  • markashton
    Asked 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

  • Ben
    Replied 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):

    Targeting the Hint Colour on Text Box on FireFox Browser Image 1 Screenshot 20

    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

  • markashton
    Replied on October 12, 2015 at 1: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

  • Ben
    Replied on October 12, 2015 at 2: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:

    Targeting the Hint Colour on Text Box on FireFox Browser Image 1 Screenshot 20

    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).

  • markashton
    Replied on October 12, 2015 at 5: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

     

  • jonathan
    Replied on October 12, 2015 at 6:28 PM

    Hi Mark,

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

    Targeting the Hint Colour on Text Box on FireFox Browser Image 1 Screenshot 20

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

    Please let us know if still not.

     

    Thanks.

     

     

  • markashton
    Replied on October 13, 2015 at 6:11 AM

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

    Thanks Mark

  • Chriistian Jotform Support
    Replied on October 13, 2015 at 9: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.