JSFiddle - React, Tailwind, and code Playground

HTML

<table id="searchBox" style="border:1px solid #555;">
 <tr>
  <td>
   <input type="text" style="border:none" onclick="makeActive()" onblur="makeUnactive()" />
  </td>
  <td>
   <select onclick="makeActive();" onblur="makeUnactive()">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
   </select>
  </td>
  <td>
   <!--<input type="submit" value="Submit" />-->
  </td>
 </tr>
</table>

JavaScript

function makeActive() {
    //alert("mA")
 document.getElementById("searchBox").style.border="1px solid red";
}
function makeUnactive() {
    //alert("mU")
 document.getElementById("searchBox").style.border="1px solid yellow";
}