What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Changing the active focus border color of the input field

    Asked by Pierre_Lopez on September 27, 2016 at 11:14 AM

    I've been able to change the background colour for the highlight but not for the border of the answer boxes.

     

    Where can I change this colour?

     

    Many thanks,

    Page URL:
    https://eu.jotform.com//?formID=62063860791358

    Screenshot
    colour boxes thanks background colour
  • Profile Image
    JotForm Support

    Answered by Jan on September 27, 2016 at 02:15 PM

    Please insert this custom CSS code in the form:

    .form-line-active input:focus, .form-line-active textarea:focus {
    border: 1px solid green !important;
    box-shadow: 0 0 3px green !important;
    -moz-box-shadow: 0 0 3px green !important;
    -webkit-box-shadow: 0 0 3px green !important;
    }

    input:focus, textarea:focus, select:focus {
    outline-offset: 0px !important;
    outline: none !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image

    Answered by Pierre_Lopez on September 27, 2016 at 04:46 PM
    Many thanks! It works perfectly.
    Pierre Lopez
    Responsable Grands Comptes Export
    Export Key Accounts Manager
    Tel: +33160062663 Cell: +33611688640 Email: pierre.lopez@aereco.com
    [http://www.aereco.com/wp-content/uploads/2016/02/Logo-pour-signature-mails.jpg]
    Aereco S.A.
    62 rue de Lamirault - Collégien
    77615 Marne la Vallée cedex 3 - France
    www.aereco.com
    [http://www.aereco.com/wp-content/uploads/2016/02/icones_Linkedin_25x25-09.jpg] [http://www.aereco.com/wp-content/uploads/2016/02/icones_Twitter_25x25-10.jpg] [http://www.aereco.com/wp-content/uploads/2016/02/icones_Viadeo_25x25-11.jpg] [http://www.aereco.com/wp-content/uploads/2016/02/icones_Youtube_25x25-15.jpg]
    [cid:image012.jpg@01D21909.9C7D8EC0]
    De : JotForm [mailto:noreply@jotform.com]
    Envoyé : mardi 27 septembre 2016 20:15
    À : LOPEZ Pierre
    Objet : Re: Colour border of the answer boxes when highlighted
    A new response has been received:
    [JOTFORM]
    Answered by Jan
    Please insert this custom CSS code in the form:
    .form-line-active input:focus, .form-line-active textarea:focus {
    border: 1px solid green !important;
    box-shadow: 0 0 3px green !important;
    -moz-box-shadow: 0 0 3px green !important;
    -webkit-box-shadow: 0 0 3px green !important;
    }
    input:focus, textarea:focus, select:focus {
    outline-offset: 0px !important;
    outline: none !important;
    }
    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:
    [https://www.jotform.com/uploads/forum/Jan/1474999896sample.gif]
    Hope that helps. Thank you.
    View this thread on browser » Unsubscribe Thread
    1475000140
    ...
  • Profile Image

    Answered by sevkiyontem on September 29, 2016 at 07:46 AM

    Dear Pierre_Lopez Here you can find how to insert css code into your form. We are upgrading our design and code tools so it can look a little bit different, but very similar. Let me tell you in details, while creating a form, you will see a preferences icon at top right, when you click it, a window is opened from the right side of the screen, there is a link at the left bottom of that segment "Form Styles"; click it, there you can access "Inject CSS" section. If you have already focused on a line in the form, you need to find "Setup&Embed" tab: After all, paste the following code and try different colors, look at this page for different color names used in css coding (http://www.w3schools.com/cssref/css_colors.asp) :

    .form-line-active input:focus {

    border : 4px solid yellow !important;

    outline-color : blue !important;

    }

    Here, you can decrease the border thickness by decreasing the number in line 2. Additionally if you want just one color, delete the second line and use just outline color.
     
    Please save your work before previewing, otherwise you could not see the changes.
     

    I hope this helps, All the best.