I'm having an incredibly difficult time styling Twitter Typeahead's search bar. Adding the Typeahead javascript seems to add three new classes to my search bar, .twitter-typeahead, .tt-hint, and .tt-input, which each behave in different, bizarre ways.
First, the background of the search bar was set to transparent after I added Typeahead, even though I had set it to white with a different class, so I had to add a white background wrapper, which contains all three new classes. Giving .typeahead width: 100%; height:100%; border-radius: 20px;fits it to the border-radius and height of the wrapper, but it's about 50px shorter than the wrapper. .tt-input fits the height and width perfectly, but it's apparently what is making the background transparent, because the about 50px of discrepancy between .tt-input and .twitter-typeahead is the color of the background, not the white wrapper. Finally, .tt-hint obeys only the color. It's white, but it doesn't respond when I try to set the border-radius, height, or width.
If explicitly setting the attributes of these classes doesn't appear to work to style them, I have to conclude that there are other classes in play that I can't find. That, or there's a bug in Typeahead's code.
Has anyone run into anything like this?? Does anyone know why the three classes might not be responding to the css? I'm at my wit's end.
The reason why your css is getting overridden is because Typeahead.js uses javascript to add the css and change the styling. Since all that happens after your css is loaded to the page, it takes precedence and messed up what you already did.
I noticed your are using Bootstrap. Check this issue that was opened https://github.com/twitter/typeahead.js/issues/378 a while back that helps you go into styling typeahead while using a bootstrap framework. Jharding (the one maintaining typeahead) does mention something interesting in that link though:
Someone asks: "@jharding If you have no interest in writing “an official Bootstrap library” how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not."
@jharding: Will be possible in v0.11.
So it looks like you'll have to wait for a newer version of Typeaway to more freely style it.