title: CSS hover/active touch feedback not working on mobile until react-select is shown
body: <p>I am struggling to debug the issue here. Until a react-select is shown on the UI the feedback on mobile touch elements do not provide feedback on touch.</p>
  
  <p>This can be seen here by completing the journey on mobile until step 4:
  <a href="https://odd-panda-design.badgerbookings.com/booking" rel="noreferrer">https://odd-panda-design.badgerbookings.com/booking</a></p>
  
  <p>When you first interact with the elements there is no feedback however when you get to the 4th screen in the journey and click "signup" (showing the react select) the hover elements suddenly provide feedback if you navigate back to them. This issue is only on mobile and not web. I have tested on iPhone 6 using Chrome.</p>
  
  <p>Below is the react-select element that triggers the touch feedback interactions. </p>
  
  <p><a href="https://i.stack.imgur.com/b9t50.png" rel="noreferrer"><img src="https://i.stack.imgur.com/b9t50.png" alt="enter image description here"></a></p>
  
  <p>I have tried adding <code>onTouchStart</code> and changing the hover elements to include <code>:active</code> or <code>:focus</code></p>
  
  <p>I am not sure if this is a react or javascript issue</p>