Control the appearance of the delete button, a pure CSS solution

Q: How can I control the appearance of the delete button with CSS, so that it only displays when an Ink Annotation is selected?

A:

  1. Load a custom stylesheet to provide your custom CSS:

  const instance = await PSPDFKit.load({
      ...configuration,
      styleSheets: ['https://example.com/my-stylesheet.css'],
  })
  1. Add a display:none rule to all delete buttons that are not the ink annotation one:

  .PSPDFKit-Rectangle-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Ellipse-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Image-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Line-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Note-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Polygon-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Polyline-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Rectangle-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Stamp-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Text-Annotation-Toolbar-Button-Delete,
  .PSPDFKit-Text-Markup-Annotation-Toolbar-Button-Delete {
    display: none;
  }