How to enable Form Box shadow

  • Profile Image
    benjaminaurelius
    Asked on August 04, 2014 at 02:48 PM

    Hey,

     

    I would like to know how I could reproduce the blue highlightes box shadow that appears as soon as a field is active. Like seen in this product: http://codecanyon.net/item/nexforms-the-ultimate-wordpress-form-builder/full_screen_preview/7103891   (scroll down and click on a field).

    I tried to copy the code from the site (box-shadow) but couldnt figure it out.

     

    Thank you!

  • Profile Image
    KadeJM
    Answered on August 04, 2014 at 04:23 PM

    As far as I know I think you basically wish to turn the form highlight effect into a box shadow when the input is selected. This should be possible with some custom injected css.

    Please see this example demo form: http://form.jotform.us/form/42156069790157

     

    Here's How to Apply this to your Form ~

    (1) Make sure you've disabled your form's highlight effect.

    (2) Grab the following CSS Code from below and Inject it into your form.

     

    CSS Code:

    textarea:focus,

    input[type="text"]:focus,

    .uneditable-input:focus {

    border-color: rgba(82, 168, 236, 0.8);

    outline: 0;

    outline: thin dotted \9;

    /* IE6-9 */-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    }

     

    The above CSS was derived from an example in this reference thread at Stack Exchange. I think we have a similar thread in our forum somewhere that is more specific on how to do this here involving our form fields but unfortunately I seem to be unable to find it.