CSS customization for input validators

Hi everybody,

I have used the “Email Contact Form” cookbook recipe, and everything worked fine :upside_down_face:
I have just one question regarding the input field validators. How are they visually customizable? I can’t find any ressources for this topic. And inspecting them via Browser DevTools is quite impossible as they are pretty shy;)

Many thanks,

I don’t really know if and to what extend these browser messages are styleable with CSS and that might differ from browser to browser. If you want full control, you would probably have to implement your own with JavaScript.

1 Like

Thanks @texnixe

Are those Browser native validators based on the required values? I assumed those where related to Kirby?

No, they are not related to Kirby. They are result of the markup, e.g. the required attribute or the type of input field, e.g. type email would check for a valid email address, etc. depending on what each browser supports.

These look different from browser to browser, which is unfortunate. I usually something like Bouncer that still uses HTML5 validation and html attributes, but smooths out the user experience so that it is consistent between browsers. I hope that helps.

Thanks everybody for your help — learned something new today :slight_smile: