Custom Shadow on Fields

Hello @bob-reeves !

Hope you’re having a good day!

Sure, you can use the following CSS as a base and adjust it to your needs:

.forminator-custom-form input, .forminator-custom-form textarea, .forminator-custom-form select {
-webkit-box-shadow: 5px 5px 15px 5px #000000; 
box-shadow: 5px 5px 15px 5px #000000;
}

I used https://html-css-js.com/css/generator/box-shadow/ to generate the shadow’s CSS easily.

Kind regards,
Pawel

Hi @wpmudev-support9

Thankyou for your response, unfortunately it does not seem to work on the “select” fields.

Also, totally my fault, I forgot to mention that the shadow should only appear on “hover”.

Hope you can help again.

Regards

Bob

I think I have figured it out, the css that I have used is;

.forminator-custom-form input:hover, .forminator-custom-form textarea:hover , .forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select:hover {
box-shadow: 0 0 5px rgba(33,33,33,.3);
}

If you can trim this it would be great.

Regards

Bob

Hi @bob-reeves

I think this is fine. If if works for you as expected, I would keep it like this. Since Forminator doesn’t use “select” fields directly for rendering drop-down view on front-end, such sort of “workaround” for CSS is necessary and your solution doesn’t really look particularly “complex” so in my opinion – if it works the way you want, it’s perfectly fine to be used.

Best regards,
Adam

Thanks @wpmudev-support8,

I will mark this as resolved.