Styling form fields

Hey there,

What’s the best way to change the style of form fields when they’re focused or hovered? I can’t see any example of this in the relevant docs.

Cheers,
Lee

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello Lee,

To change the style of form fields on mouseover in WebViewer, you can set a custom createInnerElement handler and add event handlers to take care of this. We have a guide on how to use setCustomCreateInnerElementHandler here.

Here is a quick example on how I was able to use this function to change the background color of Checkbox fields on hover:

const { Annotations } = instance.Core;

Annotations.setCustomCreateInnerElementHandler(Annotations.CheckButtonWidgetAnnotation, function(annotationManager, { annotation, originalCreateInnerElement }) {
    const button = this;
    const el = originalCreateInnerElement();
    const backgroundColor = el.style.backgroundColor;
    el.addEventListener('mouseover', () => {
      console.log('check button mouseover', annotation.fieldName);
      el.style.backgroundColor = 'red';
    });
    el.addEventListener('mouseout', () => {
      el.style.backgroundColor = backgroundColor;
    });
    return el;
  });

One thing to note; however, would be that this kind of customization would only work in WebViewer where the code is set. If you try to download the file, it wouldn’t necessarily behave this way in other viewers.

Let us know if this helps!

Best Regards,

Carlo Mendoza
Software Developer
PDFTron Systems, Inc.
www.pdftron.com