CSS codes to modify parts of the form

  • aqsaakhtar148
    Asked on September 25, 2022 at 4:03 AM

    Hi,


    Here's our form link:

    https://form.jotform.com/222672006840450


    1. We want to change checkbox color in input table from blue to black.

    1664092830 63300a9e4b9a6 1 Screenshot 10


    2. And change placeholder text color for State Dropdown in Address field to black. We also want it to say "Select State" instead of "Please select".

    1664092969 63300b295e8c8 2 Screenshot 21


    3. Reduce space between these 2 fields to make them look like 1 field.

    1664093848 63300e989b957 3 Screenshot 32

    Thank you in advance!

  • Billy JotForm Support
    Replied on September 25, 2022 at 4:28 AM

    Hi there!

    Thank you for reaching out to Jotform Support. I understand the requests but will need a bit of time to work out the CSS code. I’ll get back to you shortly.

    We appreciate your patience and understanding.

  • Billy JotForm Support
    Replied on September 25, 2022 at 4:58 AM

    Thanks for patiently waiting. I was able to come up with a CSS code that fulfills all your requests except changing the text from 'Please Select' to 'Select State'. The latter text requires us to edit the HTML code which we don't have access to.

    Please inject the CSS code below:

    .form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before {
    border-color: #000 !important;
    }
    .form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span label:before {
    background-color: #000 !important;
    }
    #id_36 {
    transform: translateY(-50px);
    }
    select.form-dropdown {
    color: #000 !important;
    }

    Let us know if there’s anything else we can help you with.

  • aqsaakhtar148
    Replied on September 25, 2022 at 5:19 AM

    Thank you so much, code worked perfectly. Only issue is that extra space is created below 2nd Address field. How to change it?


    1664097571 63301d23527b6 4 Screenshot 10

  • Annaliza_O Jotform Support
    Replied on September 26, 2022 at 4:24 AM

    Greetings,

    Thanks for reaching out Jotform Support. We are trying to clone the form you have on your account however we are getting a message that the form has already been deleted. Can you provide the URL form?

    Once we hear back from you, we'll be able to move forward with a solution.