- benjaminaureliusAsked on August 04, 2014 at 02:48 PM
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.
- KadeJMAnswered 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.
border-color: rgba(82, 168, 236, 0.8);
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.