Highlight Control on Focus in JavaScript

Background:

By default, Wijmo Input controls do not get highlighted when they come into focus. We can change this by adding some CSS to the control's class.

Steps to Complete:

1. Add a class to the control

2. Assign border style to the CSS class on focus-within

Getting Started

Add a class to the control

First, you'll need to add a class to the control so that we can append CSS to it when it goes into focus

<div id="theInteger" class="inputNum"></div>

Assign border style to the CSS class on focus-within

Next, CSS will need to be added to place a border around the control when it gains focus.

.inputNum:focus-within {
    border: 1px solid blue;
}

Focus-within is used because the textbox that you can enter information into is another element within the actual control. Focus-within will apply the CSS when an element within the class receives focus.

You can find a sample of this project here: https://jsfiddle.net/JParksGC/9ntjkhby/