CSS

One of the strengths of jsPlumb's approach is that the elements it creates can be easily styled with CSS. On this page we'll first run through the default CSS classes that jsPlumb attaches, followed by a quick explanation for how to attach your own, and then we'll discuss how to style SVG.

Z Index#

One thing you can - and should - use CSS for, regardless of the renderer, is z-index. Every connector, endpoint and overlay in jsPlumb adds some element to the UI, and you should take care to establish appropriate z-indices for each of these, in conjunction with the elements in your application.

Basic CSS classes#

By default, jsPlumb adds a specific class to each of the three types of elements it creates

Component	CSS Class
Connector	jtk-connector
Connector Outline	jtk-connector-outline
Endpoint	jtk-endpoint
Endpoint when full	jtk-endpoint-full
Overlay	jtk-overlay

In a simple UI, you can set appropriate z-index values for these classes. The jsPlumb demo pages, for instance, typically use a class of .window for the elements in each demo page, and the z-index of the UI is controlled with CSS rules like this:

.window { z-index:20; }.jtk-connector { z-index:4; }.jtk-endpoint { z-index:5; }.jtk-overlay { z-index:6; }

Interactive CSS Classes#

jsPlumb assigns these classes on both Connectors and Endpoints when specific user interactivity occurs:

Activity	CSS Class	Description
Mouse Hover	jtk-hover	Assigned to both connectors and endpoints when the mouse is hovering over them
Connection Drag	jtk-dragging	Assigned to a connector when it is being dragged (either for a new connection or an existing connection), and to the source endpoint when a new connection is being dragged
Connected endpoint	jtk-endpoint-connected	Assigned to an endpoint that has one or more connections. Not assigned to floating endpoints (endpoints that are being dragged)
Full endpoint	jtk-endpoint-full	Assigned to an endpoint that can accept no more connections.
Floating endpoint	jtk-floating-endpoint	Assigned to a "floating" endpoint, ie. an endpoint that is being dragged as the source or target of some new or existing connection
Element Dragging	jtk-element-dragging	Assigned to all connections whose source or target element is currently being dragged, and to their endpoints.
Source Element Dragging	jtk-source-element-dragging	Assigned to all connections whose source element is being dragged, and to their endpoints
Target Element Dragging	jtk-target-element-dragging	Assigned to all connections whose target element is being dragged, and to their endpoints
Anchor Class	jtk-endpoint-anchor-	Assigned to endpoints, and their associated elements, that have either a static anchor with an associated class, or a dynamic anchor whose individual locations have an associated CSS class. The value shown above is the prefix of the class, and the specific anchor class is appended to that value. Note that this class is added to both the artifact that jsPlumb creates and also the element on which the endpoint resides, so you will normally have to build a selector with more criteria than just this class in order to target things properly. See the documentation regarding anchors for a discussion of this.
Drop Allowed on Endpoint	jtk-endpoint-drop-allowed	Assigned to an endpoint when another endpoint is hovering over it and a drop would be allowed
Drop Forbidden on Endpoint	jtk-endpoint-drop-forbidden	Assigned to an endpoint when another endpoint is hovering over it and a drop would not be allowed
Connection Hover	jtk-source-hover	Assigned to the source element in a connection when the mouse is hovering over the connection
Connection Hover	jtk-target-hover	Assigned to the target element in a connection when the mouse is hovering over the connection
Drag	jtk-drag-select	Assigned to the document body whenever a drag is in progress. It allows you to ensure document selection is disabled - see here

Preventing selection while dragging#

jsPlumb puts a class on the body that you can use to disable the default browser behaviour of selecting DOM elements when dragging:

jtk-drag-select

A suitable value for this (from the jsPlumb demos) is:

.jtk-drag-select {  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;    }

Custom CSS Classes#

In addition to the default CSS classes, each of the main methods you use to configure endpoints or make connections in jsPlumb support the following two parameters:

cssClass - class(es) to set on the display elements. Use a space to separate multiple values.
hoverClass - class(es) to set on the display elements when in hover mode

CSS for SVG elements#

Connections#

SVG connections in jsPlumb consist of a parent svg element, inside of which there are one or more path elements, depending on whether or not you have specified an outlineStyle. To target the path element for some connection, you need a rule like this:

svg path {  stroke:red;}

Hooking this up to the custom class mechanism, you might do something like this:

instance.connect({  source:someElement,  target:someOtherElement,  cssClass:"redLine"});

CSS:

svg.redLine path {  stroke:red;  stroke-width:3;}

You might be thinking to yourself, why have the svg and path elements in this? In fact they are perhaps not required: they're just there to call out the fact that this is a style on an SVG connector.

Endpoints#

SVG Endpoints created by jsPlumb consist of a div, inside of which is an svg parent element, inside of which there is some shape, the tag name of which depends on the type of Endpoint:

Endpoint Type	SVG Shape
Rectangle	rect
Dot	circle

So you can choose, when writing CSS rules for these, whether or not you specify the shape exactly, or just leave it up to a wildcard:

instance.addEndpoint(someElement, {  cssClass:"aRedEndpoint",  endpoint:"Dot"});

CSS:

.aRedEndpoint svg circle {  fill:red;  stroke:yellow;}

...or:

.aRedEndpoint svg * {  fill:red;  stroke:yellow;}

For a full discussion of the properties you can configure on an SVG element via CSS, we refer you to the SVG spec