Focus Blur problem

Focus Blur problem

I need to change background color depending on the visibility of dropdown list.
Can anyone help? It won't turn to red when I click outside of the menu.



  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  3.  
  5. <script>
  7. $(document).on('click','body', function(){
  8.       if(jQuery(".selector").is(":focus")){
  9.              $("body").css("background-color","green");
  10.             } else{
  11.                $("body").css("background-color","red");
  12.       }
  13. });

  15. </script>

  17. <html>
  18.  <select class="selector">

  20.     <option value="berlin" data-calculation="0">Berlin</option>
  21.     <option value="london" data-calculation="0">London</option>
  22.     <option value="sydney" data-calculation="0">Sydney</option>
  23.     <option value="tokyo" data-calculation="0">Madagaskar</option>
  24. </select>
  25. </html>