How is typahead searchbar styling added?

Question

Does anyone know how exactly styling is added to the typeahead searchbar?

No matter how I style it, it starts out with default styling, and then switches over to the styling I set after about a second. It does end up where I want it, but it looks terrible to have the styling switching around as the page loads.

It's hard to tell, but I believe it is .twitter-typeahead and tt-input that are the ones moving around.

Is the alternate styling being added somewhere in the javascript? If it were, I would expect the searchbar to start out with my styling, and then be reset by the javascript, not the other way around.

Does anyone know how the styling is being added, or what I can do to stop this effect?

html

<%= form_tag users_path, :method => :get do %>
  <%= text_field_tag :search, params[:search], id:"typeahead" %>
<% end %>

jquery

<script type="text/javascript">
  // app/assets/javascripts/models_controller.js
  // initialize bloodhound engine
  $(document).ready(function(){
    var bloodhound = new Bloodhound({
      datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.value);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,

      // sends ajax request to /typeahead/%QUERY
      // where %QUERY is user input
      remote: '/typeahead/%QUERY', 
      limit: 10
    });
    bloodhound.initialize();

    // initialize typeahead widget and hook it up to bloodhound engine
    // #typeahead is just a text input
    $('#typeahead').typeahead(null, {
      maxLength: 10,
      displayKey: function(thing) {
        //...
      },
      source: bloodhound.ttAdapter(),
      templates: { 
            //....
          }
        }
      }
    });
  });
</script>