Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Customize form field styles

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

Implementing the WidgetAnnotation's getCustomStyles function allows you to add styling changes to particular types of widget annotations.

WebViewer(...)
.then(instance => {
  const { Annotations } = instance;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      // can check widget properties
      if (widget.fieldName === 'f1-1') {
        return {
          'background-color': 'lightgreen'
        };
      }
      return {
        'background-color': 'lightblue',
        color: 'brown'
      };
    } else if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
      return {
        'background-color': 'black',
        color: 'white'
      };
    } else if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
      return {
        'background-color': 'lightgray',
        opacity: 0.8
      };
    }
  };
});
WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      // can check widget properties
      if (widget.fieldName === 'f1-1') {
        return {
          'background-color': 'lightgreen'
        };
      }
      return {
        'background-color': 'lightblue',
        color: 'brown'
      };
    } else if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
      return {
        'background-color': 'black',
        color: 'white'
      };
    } else if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
      return {
        'background-color': 'lightgray',
        opacity: 0.8
      };
    }
  };
});

You can also extend the createInnerElement function on widget annotations. This allows you to use your own DOM elements for the display or just to add your own event handlers.

// in a config file
const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = () => {
  const button = this;

  const el = createInnerElement.apply(this, arguments);
  el.addEventListener('click', () => {
    console.log('check button clicked', button.fieldName);
  });

  return el;
};