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

  • Profile Image
    Mnajib
    Asked on May 08, 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? 

  • Profile Image
    Mike_G
    Answered on May 08, 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:

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

    Thank you.

  • Profile Image
    Mnajib
    Answered 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

  • Profile Image
    Nik_C
    Answered on May 17, 2017 at 03: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:

    Let us know how it worked for you.

    Thank you!

  • Profile Image
    Mnajib
    Answered on May 17, 2017 at 09: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. 

  • Profile Image
    Welvin
    Answered 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.

  • Profile Image
    Mnajib
    Answered 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. 

  • Profile Image
    Welvin
    Answered 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.

     

    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:

  • Profile Image
    Mnajib
    Answered 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? 

  • Profile Image
    Nik_C
    Answered on May 17, 2017 at 01:00 PM

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

    Does this issue persist on your end?

    Please let us know.

    Thank you!