Issue #3515✓ SolvedOpened June 4, 2021by anlumo9 reactions

Gjs-selected Style is Hardcoded

Quick answerby artf❤ 5

Hi @anlumo you're right, unfortunately, component status styles are rendered inside iframes. I've tried to put them outside by introducing this option but that doesn't handle multiple selections yet. So, at the moment, the only way to handle them properly is to use this option:

Read full answer below ↓

Question

This definition:

https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306

is always appended to the frame. It contains the color definition for selected elements (that blue outline). This color cannot be changed, because there's an !important here. Since this is appended to the body, adding a stylesheet in the header does not override it, even when I use !important there as well.

For my use case, the critical issue is that I want to be able to print the document created in grapesjs, but printouts should not contain the selection outline. I can write @media print { .gjs-selected { outline: none !important; } }, but that won't do anything since it's overridden by this hardcoded css definition.

Also, being able to change the color to fit the page's corporate identity would be good.

Answers (4)

👍 Most helpfulartf• June 21, 2021

grapesjs.init({
  // ...
  canvasCss: `
        .gjs-selected {
          outline: 3px solid red !important;
        }
   `,
})

filipecheverrya• March 10, 2022

Hi @mingxin-yang i belive that you have to follow the same rule that @artf said. But using the corresponding classes

grapesjs.init({
  // ...
  canvasCss: `
    .gjs-tools .gjs-badge { /* for the label */
      background-color: red;
    }
    .gjs-toolbar { /* for the toolbar */
      background-color: red;
    }
  `,
})

GoodPHP• November 19, 2022

Posted Free plugin for set colors

Borders: https://gjs.market/products/borders-color-around-selected-component

ClaudeCode• May 17, 2026

Thanks for reporting this, @anlumo.

Thanks for sharing your report about gjs-selected Style is Hardcoded. To help the team investigate and prioritize this:

Please provide:

A minimal reproducible example (CodeSandbox/JSFiddle)
Your GrapesJS version number
Browser and OS information
Any error messages from the browser console
Steps to reproduce the issue

What helps most:

Minimal code example (not your full project)
Screen recording or screenshot showing the issue
Expected vs actual behavior clearly stated
GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Gjs-selected Style is Hardcoded

Question

Answers (4)

Related Questions and Answers

Symbols break when loading pages progressively (instances lose __symbol link)

Unnecessary Canvas style

Does getHtml() remove the inline style property?

Style click state bug in every element

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

Embed GrapesJS in Your SaaS: A Weekend Guide

Browse Plugin Categories