SOLVED: Keyboard - selective background color change of a key

[denisspycher]

On a Keyboard: Is there any change to change the background color of selected keys?

If I try this...

.key:nth-child(1) {
  background-color: red
}

.key:nth-child(2) {
  background-color: red
}

... the keyboard looks like this.

Is it possible that it looks more like that?

[jean-emmanuel]

.key:nth-child(2) inner {
  background-color: red
}

You can use the browser inspector to look into the widget's html/css and find out what needs to be changed.

[denisspycher]

Great... thanks
I only miss an black outline on the black keys.

But you said something about browser inspector, I found it with the F12 key. I'm overwhelmed by all the information, I have to find my way around first.

[Greenman]

try this

.key > inner {
  border: 1px solid #111;
}


.key:nth-child(2) inner, .key:nth-child(3) inner, .key:nth-child(5) inner {
  background-color: orange;
}

[Mike1]

Could this somehow be used to display an instruments playable range dynamically?

[denisspycher]

It is alway a question about the right syntax...
That is helpful... thanks

I plan to show the playable keys if you choose a scale...

[Greenman]

note that the on state doesn't not work... Can't find out to get it working...

[Greenman]

this post can help you to display notes of your scale

Label for each key in a keyboard container?

Yessss! [image] CSS is such a great deal! [image]

[denisspycher]

Hi
I updated the right bottom corner with a keyboard.
The keyboard shows which piano keys occur in the harp.
The red is the root key and the blue are the keys of the scale you play on the harp.
...and it adapts to your choice of your red "root key"-button or your blue "scaling"-button.

By the way... here the download:
Harp_v3.01.zip (5.1 KB)

[zig]

Thankyou for sharing this update.