Change the Color of the Cell Editing Border

By default, the border color of the editor element in SpreadJS is shown as blue. You can change this by overwriting the createEditorElement method to apply your own CSS class.You can overwrite it within your initialization of the Spread component using code similar to the following:

// Overwrite the createEditor Element
let oldCreateEditorElementFn = GC.Spread.Sheets.CellTypes.Text.prototype.createEditorElement;
GC.Spread.Sheets.CellTypes.Text.prototype.createEditorElement = function (context, host) {
    host.classList.add('gcEditorElementOuterDiv');
    return oldCreateEditorElementFn.apply(this, arguments)
}

In this example, we are using our own CSS class called "gcEditorElementOuterDiv". For this example, we will change the border color to red. There are other options we can add too, such as removing the editor box shadow:

div.gcEditorElementOuterDiv[style*="position: absolute;"]{
   border: 2px solid red !important;
   box-shadow: none !important ;
}

For a working sample, see here: https://jscodemine.grapecity.com/share/nEa4q4uMp0qavNVrzCOefA/

For more border CSS properties and options, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/border