CSS: Text Annotation

Text Annotation

.PSPDFKit-Annotation-Toolbar

The annotation toolbar is visible when a user creates or modifies an annotation. It contains annotation specific controls.

.PSPDFKit-Text-Annotation-Toolbar

The text annotation toolbar is visible, when a user creates a new text annotation, or when a text annotation is selected to be modified.

.PSPDFKit-Toolbox-TextColor

Is also: .PSPDFKit-Toolbox
Text color picker toolbox container.

.PSPDFKit-Toolbox-FillColor

Is also: .PSPDFKit-Toolbox
Fill color picker toolbox container.

.PSPDFKit-Toolbox-Opacity

Is also: .PSPDFKit-Toolbox
Opacity dropdown slider toolbox container.

.PSPDFKit-Toolbox-Font

Is also: .PSPDFKit-Toolbox
Font dropdown selector toolbox container.

.PSPDFKit-Text-Annotation-Toolbar-Font-Color

Is also: .PSPDFKit-Input-Color-Dropdown
Specifically access the font color picker for text annotations.

.PSPDFKit-Text-Annotation-Toolbar-Background-Color

Is also: .PSPDFKit-Input-Color-Dropdown
Specifically access the background color picker for text annotations.

.PSPDFKit-Text-Annotation-Toolbar-Opacity

Is also: .PSPDFKit-Input-Dropdown
Specifically access the opacity-slider for text annotations.

.PSPDFKit-Input-Slider-Input

The slider input is a regular input element of the type "range".

.PSPDFKit-Input-Slider-Value

Current value of the slider, which is a label next to the slider.

.PSPDFKit-Text-Annotation-Toolbar-Font-Family

Is also: .PSPDFKit-Input-Dropdown
Specifically access the font-family dropdown for text annotations.

.PSPDFKit-Text-Annotation-Toolbar-Font-Size

Is also: .PSPDFKit-Input-Dropdown
Specifically access the font-size dropdown for text annotations.

.PSPDFKit-Input-Dropdown

Can also be: .PSPDFKit-Input-Dropdown-open .PSPDFKit-Input-Dropdown-active
The dropdown component, which is used as a custom select box.

.PSPDFKit-Input-Dropdown-Button

Can also be: .PSPDFKit-Input-Dropdown-Button-active
The button shows the currently selected item and lets the user open and close the dropdown.

.PSPDFKit-Input-Dropdown-Items

When the dropdown is open, this wraps all items that are selectable.

.PSPDFKit-Input-Dropdown-Item

Can also be: .PSPDFKit-Input-Dropdown-Item-selected PSPDFKit-Input-Dropdown-Item-focused PSPDFKit-Input-Dropdown-Item-disabled
Each item in the list of selectable items that is visible when the dropdown is open. It can get focused, via the mouse or when the user used the arrow keys to focus on it. There can also be one item that is currently selected and items can get disabled when they are not possible to select (For example, when a text annotation has a font familiy that is not present in the current browser).

.PSPDFKit-Input-Dropdown-Select

Native select input element that is only visible when the browser width is smaller than 990px.

.PSPDFKit-Text-Annotation-Toolbar-Alignment-left

Can also be: PSPDFKit-Text-Annotation-Toolbar-Alignment-active
Button to change the alignment of a text annotation to left. It gets active if it's the currently set alignment for the selected text annotation.

.PSPDFKit-Text-Annotation-Toolbar-Alignment-center

Can also be: PSPDFKit-Text-Annotation-Toolbar-Alignment-active
Button to change the alignment of a text annotation to center. It gets active if it's the currently set alignment for the selected text annotation.

.PSPDFKit-Text-Annotation-Toolbar-Alignment-right

Can also be: PSPDFKit-Text-Annotation-Toolbar-Alignment-active
Button to change the alignment of a text annotation to right. It gets active if it's the currently set alignment for the selected text annotation.

.PSPDFKit-Text-Annotation-Toolbar-Button-Delete

Is also: .PSPDFKit-Toolbar-Button
Button to delete a text annotation. It is only visible when the text annotation is already saved and currently selected. It does not show up when the user starts to create a new text annotation.

.PSPDFKit-Text-Annotation

Is also: .PSPDFKit-Annotation
The text annotation in the document. It's styled by the properties of the annotation.