How to Change the Color of the 'Select All' Triangle Icon in SpreadJS

In SpreadJS, the small triangle located at the intersection of the row and column headers commonly known as the 'Select All' triangle provides a quick way to select the entire worksheet. By default, this corner triangle appears in a grey color and changes to green when selected. In certain UI designs you may want to customize the appearance of this triangle to better match your application’s theme or branding.

SpreadJS allows developers to modify the styling of this corner element through dedicated CSS classes. These classes define how the triangle looks in its normal, hover, and selected states. 

The following CSS classes control the appearance of the corner triangle:

• .gc-corner-triangle-normal - default state

• .gc-corner-triangle-hover - when the user hovers over it

• .gc-corner-triangle-selected - when the triangle is clicked or active

By customizing these selectors in your stylesheet, you can fully control how the triangle is rendered. For example, the snippet below demonstrates how to change the normal state to a red background with a yellow border:

.gc-corner-triangle-normal {
    background-image: -webkit-linear-gradient(top, red, red);
    background-color: red !important;
    background-size: 30% !important;
    border-color: yellow !important;
}

.gc-corner-triangle-hover {
    /* Optional: add custom hover styling */
}

.gc-corner-triangle-selected {
    /* Optional: add custom selected-state styling */
}

This approach provides a simple way to integrate SpreadJS more seamlessly into your application's visual theme.