How to change the font color for hover

  • SpeedThesis
    Asked on June 16, 2020 at 10:43 AM

    2) how to change the font color for hover?

    It would be highly appreciated if you could please suggest CSS code for me.

    Thanks so much  :)

  • Ivaylo JotForm Support
    Replied on June 16, 2020 at 11:10 AM

    You can inject the following CSS code for the hover effect of the Submit button:

    .form-submit-button:hover {

    background: #FFFF00;

    color: #fff;

    border: 1px solid #eee;

    border-radius: 20px;

    box-shadow: 5px 5px 5px #eee;

    text-shadow:none;

    }

    Below is the CSS code for the hover effect of the Upload button:

    .qq-upload-button.qq-upload-button-hover {

        color : #00FF00 !important;

        background-color : #FF00FF !important;

        font-weight : bold !important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please feel free to experiment with different values in the CSS code, which will allow you to achieve the desired result.

  • SpeedThesis
    Replied on June 16, 2020 at 12:20 PM

    Hi IvayloK,

    I'm very grateful for your kind support.  :)

    The code for the hover effect of the Upload button works well.


    However, the code for the hover effect of the Submit button does not work.

    - The color of background and the font did not change.

    - The font size did not show on the Preview.

    - When I adjust the size of the Submit button, it seems to have an effect on the Upload button. They become not aligned at the center and I have no idea why this happens.

    Please find the images attached for your reference.

    Looking forward for your suggestions.

    Regards,


    ............

    Buttons on Advanced Designer

    1592324336Buttons in Adv Dsn Screenshot 10


    ...........

    Buttons on Preview

    1592324363Buttons in Preview Screenshot 21

  • Ivaylo JotForm Support
    Replied on June 16, 2020 at 2:00 PM

    Please allow me some time to further test the CSS code and prepare an example form.

    I will contact you later today.

  • Ivaylo JotForm Support
    Replied on June 16, 2020 at 4:09 PM

    I have fixed the CSS code. You can clone and test my form from here:

    https://form.jotform.com/201675708433962

    So, you can just clone it in your account and use it.

    Please note that if you adjust the size of the buttons from the Advanced Designer, it will affect all buttons.

    If you want to adjust the size of a particular button, I would recommend you to use CSS code. If you need, we can help you with this code.

    Let us know if you need any further assistance.

  • SpeedThesis
    Replied on June 17, 2020 at 12:51 AM

    Hi IvayloK,

    Thanks so much for your kind support.

    I use the CSS code from the cloned form as you suggested, but the font color didn't change as it showed in the cloned from (I prefer the white font in both normal and hover effect).

    Please find the images attached for your reference.

    Looking forward for your further advice.  :)


    .............

    Cloned Form (I prefer this one)

    1592369436Submit Button Screenshot 10

    .............

    Actual One

    1592369477Submit Button [Preview] Screenshot 21

  • Sonnyfer JotForm Support
    Replied on June 17, 2020 at 4:24 AM

    Hi there - Kindly add the below CSS code your form:

    #input_88{

      color: white ! important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes 

    Result:

    1592382210gsds Screenshot 10

    If you need further assistance, please let us know.

  • SpeedThesis
    Replied on June 17, 2020 at 6:20 AM

    Hi Sonnyfer,

    The CSS code works so well!

    Thanks so much for your great support  :)