title: How to have "tab selector" effect for "input" elements?
body: <p><img src="https://i.imgur.com/CqqYQUY.png" alt="ss">
  I'm trying to implement those "tab-highlights" that you can see above the form in the screenshot, to my "input" elements, so the user knows which field they've clicked and currently on.</p>
  
  <p>Tried "focus" and "::selection" to change the input field's left side border to turn blue when focused or selected. Didn't work. I have run out of ideas at that point. </p>
  
  <p><a href="https://codepen.io/anon/pen/QRybBr" rel="nofollow noreferrer">https://codepen.io/anon/pen/QRybBr</a></p>
  
  <pre><code>.section1 .uk-input:focus{
      background:#EAEEF2;
      border: 1px, solid, black !important;
  }
  </code></pre>
  
  <p>Here's basically what I have on the screenshot (sorry for the php stuff).</p>
  
  <p>I can change the background of the input when focused on. Can't change the border though. It stays blue.</p>