Change text color on click to have color like background

Question

When the background is red, onclick of grid cell I would like the background to turn grey but the text to remain red, yellow, green etc. How do I do that?

@mixin hoverable-row($bg-color, $highlight-color: $gray-c5, $hover-color: null) {
  &:not(.p-highlight) {
    background-color: $bg-color;
    &:hover {
      @if ($hover-color) {
        background-color: $hover-color;
      }
      @else {
        background-color: rgba($bg-color, 0.6);
      }
    }
  }
}

tr.p-element.p-selectable-row {
  &.row-bg-default {
    @include hoverable-row($default-background, $hover-color: $default-highlight);
  }
  &.row-bg-red {
    @include hoverable-row($red-background);
  }
  &.row-bg-green {
    @include hoverable-row($green-background);
    color: inherit;
  }
  &.row-bg-yellow {
    @include hoverable-row($yellow-background);
    color: inherit;
  }
}

You will need JavaScript if you want these style changes to persist after releasing a click event — Zach Jensz, Sep 22 '22 at 11:29
This is SCSS code which get's compiled to CSS. With CSS you can't do any of your requirements. Please add relevant code and specify what exactly you want to achieve. — cloned, Sep 22 '22 at 11:29

score 1 · Accepted Answer · answered Sep 22 '22 at 11:53

Well, it's possible but you'll have to do some CSS magic. I haven't seen any of your HTML build up, but I suggest looking into the :focus and the :focus-within CSS suffixes.

:focus is a pseudo-class that is added once the user has i.e. clicked on an element. The problem here, is that this pseudo-class is originally exclusively available to form-elements. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

:focus-within on the other hand, is a pseudo-class added to any element containing a focused element. And thus can be used in conjunction with any parent element. More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Furthermore, a workaround to be able to set focus to any element is the tabindex attribute which you can add to basically any element. tabindex will notify the browser that, whenever a user presses 'Tab' on the keyboard, the focus of the page will be set to whatever that element is, e.g. <tr>. But, whenever an element can be focused on by tabindex, the browser will allow the element to be clicked and focused as well.

So if we combine this knowledge, you should be able to achieve what you're trying to manifest by adding tabindex as an attribute to your <tr> and/or <td> and extending your tr.p-element.p-selectable-row as such:

tr.p-element.p-selectable-row {
  &.row-bg-default {
    @include hoverable-row($default-background, $hover-color: $default-highlight);
  }
  &.row-bg-red {
    @include hoverable-row($red-background);
  }
  &.row-bg-green {
    @include hoverable-row($green-background);
    color: inherit;
  }
  &.row-bg-yellow {
    @include hoverable-row($yellow-background);
    color: inherit;
  }

  // add this:
  &:focus, &:focus-within{
    background:grey;
  }
}

I've found a similar question which received a similar response here: https://stackoverflow.com/a/50492334/11787139

Change text color on click to have color like background

1 Answers1