グリッド：選択とフォーカス

「wj-state-focused」疑似クラスを使用すると、FlexGridコントロールのアクセシビリティを向上させることができます。

たとえば、次のコードは、フォーカスがない場合は選択項目を灰色で表示し、フォーカスがある場合は選択されたセルにオレンジ色の枠を追加します。

/* フォーカスがあるセルのスタイルを設定します */
.wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected {
    border: 2px solid orange;
    transition: all 100ms;
}

/* グリッドにフォーカスがない場合は、選択されたセルの強調表示を解除します */
.wj-flexgrid:not(.wj-state-focused) .wj-state-selected,
.wj-flexgrid:not(.wj-state-focused) .wj-state-multi-selected {
    background: #ddd;
    color: black;
}