de mise en œuvre de problème CSS

Question

Im ayant un problème en utilisant les typeahead.js, un nouveau plug-in de Twitter, vous pouvez voir un exemple de la façon dont ce plugin est censé regarder: http://twitter.github.com/typeahead.js/examples/

Vous pouvez voir ma mise en œuvre ici: http://mypcisbroke.co.uk/problem/

Mes questions

• La zone de texte devrait changer de blanc sur mise au point (cela a fonctionné avant l'installation du plug-in)
• Suggestions qui autocomplete en zone de texte devrait être dans une couleur plus claire

Voici mon site css

.navbar .top-search form { margin: 0 10px 0 0; padding-top: 5px; position: relative; } 
.navbar .top-search input, .navbar .top-search button { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } 
.navbar .top-search input { padding: 2px 24px 2px 10px; border: none; margin: 0; width: 150px; background: #999; -webkit-border-radius: 20px; moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; } 
.navbar .top-search input:focus { background: #f5f5f5; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } 
.navbar .top-search button { opacity: .6; position: absolute; right: 7px; top: 9px; padding: 0; margin: 0; line-height: 12px; background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } 
.navbar .top-search input:focus + button { opacity: 1 } 

Ceci est le style de typeahead

.typeahead, 
.tt-query, 
.tt-hint { 
    width: 396px; 
    height: 30px; 
    padding: 8px 12px; 
    font-size: 24px; 
    line-height: 30px; 
    border: 2px solid #ccc; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
      border-radius: 8px; 
    outline: none; 
} 

.typeahead:focus { 
    border: 2px solid #0097cf; 
} 

.tt-query { 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 

.tt-hint { 
    color: #999 
} 

Toute aide sur ce serait vraiment apprécié.

Merci

Answer 1

1. Ajouter la règle !important sur .navbar .top-search input et vous obtiendrez le blanc sur le focus. Il y a évidemment un conflit de spécificité quelque part ..

   Ajouter comme ceci:

   .navbar .top-search input:focus { 
   background: none repeat scroll 0 0 #F5F5F5 !important; 
   box-shadow: none; 
   } 
   

2. Pour changer la police couleurs suggestions simplement modifier votre sélection .tt-suggestion p dans votre fichier typeaheadstyling.css en ligne 58

Answer 2

Sur le fichier typeahead.css, sur la ligne 13, vous avez une ligne de code qui lit ceci

background-color: transparent !important; 

Cela est nécessaire, pour cette raison exacte. Il crée un fond couleur de transparent pour tout .tt-query (mais je ne sais pas où cela se trouve, parce que rien ne dispose d'une classe de tt-query dans votre html). Vos styles :focus vont bien. Si vous supprimez !important, votre code devrait fonctionner correctement. Comme alternative, vous pouvez utiliser la méthode qui suggère sombre, et ajouter !important aux styles de mise au point. Cela fonctionne, mais je ne l'utilise que pour la correction de bugs et la production. Rarement je l'utilise sur un site déployé