appending a 'class' to each key

This issue has been tracked since 2022-07-18.

Is your feature request related to a problem? Please describe.
similar to how wordle works, I would like to highlight letters that a user has previously submitted. But upon investigation it seems Simple-Keyboard does not append a unique class to each key, so highlighting keys individually is not possible.

Describe the solution you'd like
each key is tagged with a class as follows:
{base}_{key name}

so for example the 'e' key would be:


or the 'T' key would be


This makes it easy to programatically access and manipulate each key.

Describe alternatives you've considered
Looking into finding the key using the attribute and then appending a class to the key programatically. But this is a bit long winded. we could instead just have a class for each key as standard.

Additional context

mabandla2003 wrote this answer on 2022-07-18

UPDATE: After some time trying the workaround I suggested ( it seems it's just not possible to add a class to a key in order to then style it individually.

Looking forwad to your advice on this and feedback on my feature request.

hodgef wrote this answer on 2022-07-20

Hey @mabandla2003,

There have been a few wordle implementations, you can browse for them here:

Also, every key in simple-keyboard has both an unique id (data-skbtnuid) and a name (data-skbtn). You can do a CSS select using these attributes. I don't think it's worth adding a class that would provide what you already can get using the attributes.


If you do need to add a class, you can use onRender then recurseButtons to add a class to each button element.

Another option: the buttonTheme functions which serve to add classes to individual buttons:

Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-06
Star Count 1738
Watcher Count 20
Fork Count 130
Issue Count 0


Issue Title Created Date Updated Date