CodePen

HTML

            
              <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul> 

<input type="text" placeholder="CLICK IN HERE">
 
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul.focussed li {
  border-left:4px solid #cc3300;
  background:#e8e8e8; 
}



/* just for the text box */

input[type="text"] {
  width: 400px;
  height: 50px;
  line-height: 50px;
  padding: 5px;
  font-size: 30px;
  border: 1px solid red;
{
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function () { 
  $('input').focus(function () {
     $('ul').addClass('focussed');
  });
  $('input').focusout(function () {
    $('ul').removeClass('focussed');
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................