CSS allows you to use the :focus pseudo-selector to apply formatting to elements that have the focus. This works well for simple elements like input, but not for controls composed of multiple child elements. For example, a Wijmo ComboBox has an outer div, an input element that displays the currently selected item, a drop-down button, and a list. Since only one element may have the focus, when one of the Combo's inner elements has the focus, the outer div does not. This means the focus selector cannot be used to style Wijmo controls (or any compound controls). The same applies to list-box items, grid cells, chart series, etc. To address this issue, Wijmo controls add a "wj-state-focused" class to controls that have the focus. You can use this class in your CSS rules to achieve the same effect :focus has on regular elements. For example, this CSS adds a blue outline to Wijmo controls that have the focus:
.wj-control.wj-state-focused {
outline: 1px solid blue;
}
You can use the "wj-state-focused" class selector to create CSS rules that use animation to make your application seem richer and more interactive. For example, this CSS adds an animated zoom effect to the thumb indicator in Wijmo Gauge controls. When the control gets the focus, the thumb becomes red.
.wj-gauge circle.wj-pointer {
fill: #404040;
stroke: none;
transform-origin: center center 0px;
transform: scale(1);
transition: transform .5s;
}
.wj-gauge.wj-state-focused circle.wj-pointer {
fill: red;
stroke: black;
transform: scale(1.3);
transition: transform 1s, fill 0.5s, stroke 0.5s;
}
MESCIUS inc.