javascript - Mouse Event Handling for an Element -

i made search box, coding this

<table id="searchbox" style="border:1px solid #555;">  <tr>   <td>    <input type="text" style="border:none" id="mytextbox" onclick="makeactive();" />   </td>   <td>    <select onclick="makeactive();">     <option>option 1</option>     <option>option 2</option>     <option>option 3</option>    </select>   </td>   <td>    <input type="submit" value="submit" />   </td>  </tr> </table> 

functions

function makeactive() {  document.getelementbyid("searchbox").style.border="1px solid #ff0000"; } function makeunactive() {  document.getelementbyid("searchbox").style.border="1px solid #555"; } 

my requirement : code says when user either click textbox or selectbox table border changes shows searchbox active now, , i want when user click outside searchbox table function makeunactive() should called, tried use onblur="makeunactive();" within textbox script called when click selectbox or submit button wrong :(

---

edited

working fine check answer below how did it

---

you should use onfocus property call active function.to make field inactive, call inactive function in onblur property.

demo

working fine:

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> 

js

function makeactive() { document.getelementbyid("searchbox").style.border="1px solid red";} function makeunactive() { document.getelementbyid("searchbox").style.border="1px solid yellow"; }