Trigger i:active when keydown on HTML page

Question

I'm making a HTML page to control a RC Car. I want to be able to activate the "i:active" in CSS when keyboard arrows are down. The arrows in HTML:

<i class="left" onmousedown="venstreFunc()" ></i>
<i class="up"  onmousedown="fremoverFunc()" ></i>
<i class="right" onmousedown="hoyreFunc()"  ></i>
<i class="down" onmousedown="bakoverFunc()" ></i>

I can drive the RC car with both mousedown and the keydown events in my JavaScript, but i want to be able to see the orange border when i push down the keyboard arrows

How can I implement the keyboard arrow events to give the same orange border on the arrows as when I click/hold down on them?

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;

    if (e.keyCode == '38') {
       connection.send("1");
    }
    else if (e.keyCode == '40') {
        connection.send("4");
    }
    else if (e.keyCode == '37') {
       connection.send("2");
    }
    else if (e.keyCode == '39') {
       connection.send("3");
    }
}

i {
  border: 1px solid #000;
  border-width: 0 20px 20px 0;
  display: inline-block;
  padding: 24px;
  cursor:pointer;
  position: absolute;
  outline:none;
}

i:active {
	border-right: solid orange;
    border-bottom: solid orange;
    border-width: 0 13px 13px 0;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
     margin: 50px 0  0 200px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin: 150px 0 0 300px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
     margin: 240px 0 0 200px;
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin:150px 0 0 100px;
}

<i class="left" onmousedown="venstreFunc()" ></i>
<i class="up"  onmousedown="fremoverFunc()" ></i>
<i class="right" onmousedown="hoyreFunc()"  ></i>
<i class="down" onmousedown="bakoverFunc()" ></i>

Answer 1

What I would sugest is to manage active class instead of state on keyboard events. So add CSS rule for active class:

i:active,
i.active {
    border-right: solid orange;
    border-bottom: solid orange;
    border-width: 0 13px 13px 0;
}

And then add and remove this class on onkeydown and onkeyup events.

Example on JSFiddle.