customize the style for the selector

1 min read

Customize the style for the selector

Diagram provides a support to customizing the appearance of the Selector Element. You can customize the selector element by overriding the style of selector element in the css class.

The following code illustrates how to customize the style of the selector element.

CSS

<style>
        /*Customizing the selector appearance at the time of rubberband selection. */
         #helper {
            stroke: black;
            stroke-width: 2px;
            stroke-dasharray:none;
            fill: gray;
            opacity: .1;
        } 
        /*Customizing the selector appearance after rubberband selection. */
         #resizeBorder {
            stroke: red;
            stroke-width: 5px;
            fill: #686868;
            opacity: .1;
        }
 
        /*Customizing the circle of the selector element.*/
        #nw-resize, #n-resize, #ne-resize, #w-resize, #e-resize, #sw-resize, #s-resize, #se-resize
        {
            stroke: red;
        }
</style>

Default Selector style at the time of rubberband selection.

Default selector style for nodes at the time of rubber band selection