Can't select input text when focused

Question

I am creating a search bar that expands when it is being used and contracts when it's not. I got that part working, the problem is the contraction is a little over zealous. When I write something in the bar and then try to click on a word that I just wrote I shrinks again. It's weird, because as far as I can tell I haven't lost focus of the bar, so why would it be doing this. I am using focus and blur to trigger the expand and contract.

$(document).ready(function(){
  $(".search_bar").bind('focus blur', function(){
      $('.search_bar').toggleClass('search_bar_focus');
      $('.search_button').toggleClass('search_button_focus');
      $('.logo').toggleClass('logo_focus');
  });

Here is the code I have: http://jsfiddle.net/easilyBaffled/bbrP9/3/

Answer 1

The problem is the z-index: -1; on .search_bar:focus, .search_bar:active

In firefox, this means that the page is actually stacked in front of your input. It can still receive input, but when you click, you're actually clicking on the document.

In chrome, it can't even receive input at all.

In either case, changing z-index to a positive number worked.