How can I change color of red error border around textarea comment box?

  • Mnajib
    Asked on May 8, 2017 at 10:44 AM

    when I change the color of the form error for text boxes, the color change works. However the red error border around the required comment box stays the same. How can I change it to appear a different color? 

  • Mike_G JotForm Support
    Replied on May 8, 2017 at 11:57 AM

    If you only want to change the border of the Textarea field's comment box, you can inject the following CSS codes below to your form.

    .form-line-error textarea {

        border: 1px solid blue !important;

        box-shadow: 0 0 3px blue !important;

    }

    Just change the color "blue" to your preferred color.

    How-to-Inject-Custom-CSS-Codes

    Below is the result of the codes above:

    How can I change color of red error border around textarea comment box? Image 1 Screenshot 20

    I hope this helps. If you have any further questions or concerns, please feel free to contact us again anytime.

    Thank you.

  • Mnajib
    Replied on May 16, 2017 at 11:10 PM

    why is it not working? I can see the change happen in the design mode of the form but it's still red when I preview it

  • Nik_C
    Replied on May 17, 2017 at 3:13 AM

    Please insert the below CSS in your Custom CSS field:

    .form-error-message {

        background: blue!important;

    }

    Just change the color. And it will change the error field like this:

    How can I change color of red error border around textarea comment box? Image 1 Screenshot 20

    Let us know how it worked for you.

    Thank you!

  • Mnajib
    Replied on May 17, 2017 at 9:27 AM

    Im morning trying to change the color of the error message. 

    The following code was correct:

    .form-line-error textarea {

        border: 1px solid blue !important;

        box-shadow: 0 0 3px blue !important;

    However when I preview my form after injecting the above code the border remains red but changes to blue in edit mode. 

  • Welvin Support Team Lead
    Replied on May 17, 2017 at 10:18 AM

    I did it for you. I think you forgot to save the changes in the CSS area. Please check again.

  • Mnajib
    Replied on May 17, 2017 at 10:31 AM

    Yes it worked. Thank you

    How did you do it? How did you save the changes in the CSS area? I want to be able to do it on my own. 

  • Welvin Support Team Lead
    Replied on May 17, 2017 at 11:15 AM

    At the bottom of the CSS box, there is a save button. You need to click that after pasting the custom CSS codes.

    How can I change color of red error border around textarea comment box? Image 1 Screenshot 40

     

    Note that the blue background of the error message isn't done with custom CSS. You can change the color in the Advanced CSS Editor > Color Scheme > Simulate error state settings:

    How can I change color of red error border around textarea comment box? Image 2 Screenshot 51

    How can I change color of red error border around textarea comment box? Image 3 Screenshot 62

  • Mnajib
    Replied on May 17, 2017 at 12:16 PM

    Okay I got it! However it only works on my mobile phone and not on my desktop browser...why is that? 

  • Nik_C
    Replied on May 17, 2017 at 1:00 PM

    I checked your form: https://form.jotform.co/70756451292863 and it worked fine on my laptop:

    How can I change color of red error border around textarea comment box? Image 1 Screenshot 20

    Does this issue persist on your end?

    Please let us know.

    Thank you!