4

Twitter の新しいプラグインである typeahead.js の使用に問題があります。このプラグインがどのように見えるかの例を見ることができます。

ここで私の実装を見ることができます: http://mypcisbroke.co.uk/problem/

私の問題

  • テキストボックスはフォーカス時に白に変わるはずです (これはプラグインのインストール前に機能していました)
  • テキストボックスのオートコンプリートを明るい色にする必要がある提案

ここに私のサイトの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 }

これが typehead のスタイリングです

.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
}

これに関するヘルプは本当にありがたいです。

ありがとう

4

2 に答える 2

4

ファイルのtypeahead.css13 行目に、これを読み取るコード行があります。

background-color: transparent !important;

これはまさにこの理由で必要です。transparentのすべての背景色を作成しています（ただし、html に.tt-queryのクラスがないため、これがどこにあるのかわかりません）。tt-queryあなたの:focusスタイルは素晴らしいです。を削除する!importantと、コードは正常に機能するはずです。

別の方法として、dark が提案した方法を使用し!importantて、フォーカス スタイルに追加することもできます。これは機能しますが、バグ修正と本番用にのみ使用します。展開されたサイトでこれを使用することはめったにありません

于 2013-02-23T01:17:14.760 に答える
2

  1. !importantルールをオンに追加する.navbar .top-search inputと、白がフォーカスされます。明らかに特異性の競合がどこかにあります..

    次のように追加します。

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

  2. 提案の font-color を変更するには、オンラインでファイルの.tt-suggestion pセレクターを編集するだけですtypeaheadstyling.css58

于 2013-02-23T00:54:49.663 に答える