Keyboard Support

Contact and Search

Keyman.com Homepage

Header bottom

Keyman.com

Other versions
Version 17.0Version 16.0 (current version)Version 15.0Version 14.0Version 13.0Version 12.0Version 11.0Version 10.0Version 2.0Version 1.0 (home page)

On this page

Class Names and Identifiers for On-Screen Keyboard and Other KeymanWeb Elements

The appearance of the KeymanWeb on-screen keyboard, menu amd other elements can be customized by a web designer by redefining (or adding to) the default styles. Styles and named elements all have the class name (or id) prefix kmw- joined to the object and item names, for example kmw-key-text, to set the basic style for the keycap text on each on-screen keyboard key. Multiple classes are applied to many objects, with top-level classes of tablet, phone and desktop used to set different element styles according to the device type. Unique elements, such as the menu and pop-up key frame, are named rather than referred to by class.

Most visual attributes such as text size and colour, background colour, shading, margins, etc. can be varied according to preference but developers should avoid changing positional attributes.

Class names applied to on-screen keyboard elements:

Class nameKeyboard element
kmw-osk-frameOuter keyboard frame
kmw-osk-inner-frameInner keyboard frame
kmw-key-layer-groupKeyboard layers container element
kmw-key-layerKeyboard layer element
kmw-key-rowKeyboard row container element
kmw-key-squareKeyboard key container element
kmw-key-square-exPop-up key container element
kmw-keyKey element
kmw-key-labelKey label (desktop OSK and phonetic layouts)
kmw-key-textKeycap text
kmw-key-popup-iconText or graphic to indicate that a keyboard key has associated popup keys
kmw-spacebar-captionStyle applied to caption on spacebar

Class names applied to different types of keys:

Class nameKey style
kmw-key-defaultDefault
kmw-key-shiftShift key
kmw-key-shift-onActive shift key
kmw-key-deadkeyDead key
kmw-key-blankBlank key (unmapped)
kmw-key-hiddenHidden key (spacer)
kmw-key-touchedActive (touched) key

Element identifiers and class names for desktop on-screen keyboard elements:

Class name or idDesktop OSK element
kmw-title-barOSK title bar
kmw-title-bar-captionOSK title bar caption (keyboard name)
kmw-title-bar-actionsContainer for image elements in OSK title bar
kmw-title-bar-imageActive image element in OSK title bar
kmw-footerDesktop OSK footer element
kmw-footer-captionCaption in desktop OSK footer
kmw-footer-resizeStyle for resizing icon
kmw-osk-staticContainer style for non-sizable keyboards
kmw-osk-noneEmpty keyboard container style
#kmw-pin-imageStyle of icon to return OSK to default position
#kmw-config-imageStyle of icon to open configuration options window
#kmw-help-imageStyle of icon to open keymanweb help window
#kmw-close-buttonStyle of close button image

Element identifiers and class names applied to pop-up key container elements:

Class name or idElement
#kmw-popup-keysPop-up key container
arrow-borderStyle setting callout arrow border
arrow-contentStyle setting callout arrow background

Element identifiers and class names applied to language menu elements:

Class nameMenu element
#kmw-language-menuLanguage menu container element
#kmw-language-menu-backgroundHidden background layer preventing unwanted action while selecting a language or keyboard.
#kmw-menu-scroll-containerContainer for language list scroller
#kmw-menu-scrollerLanguage list scroller
#kmw-menu-indexContainer for language index
#kmw-menu-footerPlaceholder at bottom of scroller
kbd-listStyle for language list element
kbd-list-openStyle for list element when expanded
kbd-list-closedStyle for list element when not expanded
kmw-list-entryLanguage entry in language list
kmw-single-entrySingle keyboard entry in language list
currentActive keyboard entry in language list
selectedTouched entry in language list

Message box class names:

Class nameElement
kmw-wait-boxMessage box
kmw-wait-backgroundMessage box background
kmw-wait-textMessage box wait text
kmw-wait-graphicMessage box wait icon
kmw-alert-textMessage box alert text
kmw-alert-closeMessage box close icon

The default styles for any released build of KeymanWeb can be found on line, for example, https://s.keyman.com/kmw/engine/339/osk/kmwosk.css for Build 339.