JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--[if IE]><html class="ie"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
<head>
<meta charset=utf-8 />
<title>Cross-browser focus outline</title>
</head>
<body>
  <div>
    <input type="text">
  </div><div>
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div><div>
    <a href="#">Anchor</a>
  </div>
  
  Version 2
</body>
</html>

CSS

div {margin: 1em;}

/* make ie and firefox :focus styling look like chrome */
  .ie a:focus
, .ie input[type=text]:focus
, .ie input[type=password]:focus
, .ie input[type=checkbox]:focus
, .ie input.text:focus
, .ie input.title:focus
, .ie textarea:focus
, .ie select:focus 
, .ie img:focus
{
    outline: none;
      border-color: #cfa85c;
    box-shadow: 0 0 3px 0px #E59700; /* Opera 10.5, IE9, Chrome 10+, FF4.0+ */
}

  .firefox a:focus
, .firefox input[type=text]:focus
, .firefox input[type=password]:focus
, .firefox input[type=checkbox]:focus
, .firefox input.text:focus
, .firefox input.title:focus
, .firefox textarea:focus
, .firefox select:focus 
, .firefox img:focus
{
    outline: none;
    border-color: #cfa85c;
    box-shadow: 0 0 1px 0px #E59700; /* Opera 10.5, IE9, Chrome 10+, FF4.0+ */
}

JavaScript

$(function(){
  console.log(Modernizr);
  Modernizr.addTest('firefox', function () {
    return !!navigator.userAgent.match(/firefox/i);
  });
  $("input").first().focus()
});