Changing the active focus border color of the input field

  • Profile Image
    Pierre_Lopez
    Asked 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,

  • Profile Image
    Jan
    Answered 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
    Pierre_Lopez
    Answered 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
    sevkiyontem
    Answered 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.