2016-04-02 10 views
0

İmleciolarak değiştirerek typeahead önerileri üzerine gelindiğinde değiştiremiyorum.Typeahead.js imleci imlecin üzerine getirecek şekilde imleci değiştir

İmleç stilini çeşitli typeahead.css sınıflarında uygulamayı denedim, işe yaramıyor.

Benim typeahead.js sürümüm 0.10.5'dur.

* 
* typehead.js-bootstrap3.less 
* @version 0.2.1 
* https://github.com/hyspace/typeahead.js-bootstrap3.less 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/MIT 
*/ 
.input-group { 
    width: 100%; 
} 
.has-warning .twitter-typeahead .tt-input, 
.has-warning .twitter-typeahead .tt-hint { 
    border-color: #8a6d3b; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-warning .twitter-typeahead .tt-input:focus, 
.has-warning .twitter-typeahead .tt-hint:focus { 
    border-color: #66512c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
} 
.has-error .twitter-typeahead .tt-input, 
.has-error .twitter-typeahead .tt-hint { 
    border-color: #a94442; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-error .twitter-typeahead .tt-input:focus, 
.has-error .twitter-typeahead .tt-hint:focus { 
    border-color: #843534; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
} 
.has-success .twitter-typeahead .tt-input, 
.has-success .twitter-typeahead .tt-hint { 
    border-color: #3c763d; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-success .twitter-typeahead .tt-input:focus, 
.has-success .twitter-typeahead .tt-hint:focus { 
    border-color: #2b542c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
} 
.input-group .twitter-typeahead:first-child .tt-input, 
.input-group .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
} 
.input-group .twitter-typeahead:last-child .tt-input, 
.input-group .twitter-typeahead:last-child .tt-hint { 
    border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; 
} 
.input-group.input-group-sm .twitter-typeahead .tt-input, 
.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    line-height: 1.5; 
    border-radius: 3px; 
} 
select.input-group.input-group-sm .twitter-typeahead .tt-input, 
select.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    line-height: 30px; 
} 
textarea.input-group.input-group-sm .twitter-typeahead .tt-input, 
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 3px; 
    border-top-left-radius: 3px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 3px; 
    border-top-right-radius: 3px; 
} 
.input-group.input-group-lg .twitter-typeahead .tt-input, 
.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 
select.input-group.input-group-lg .twitter-typeahead .tt-input, 
select.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    line-height: 46px; 
} 
textarea.input-group.input-group-lg .twitter-typeahead .tt-input, 
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 6px; 
    border-top-left-radius: 6px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 6px; 
    border-top-right-radius: 6px; 
} 
.twitter-typeahead { 
    width: 100%; 
    float: left; 
} 
.input-group .twitter-typeahead { 
    display: table-cell !important; 
} 
.twitter-typeahead .tt-hint { 
    color: #999999; 
} 
.twitter-typeahead .tt-input { 
    z-index: 2; 
} 
.twitter-typeahead .tt-input[disabled], 
.twitter-typeahead .tt-input[readonly], 
fieldset[disabled] .twitter-typeahead .tt-input { 
    cursor: not-allowed; 
    background-color: #eeeeee !important; 
} 
#scrollable-dropdown-menu .tt-dropdown-menu { 
    max-height: 150px; 
    overflow-y: auto; 
    cursor:pointer; 
} 

.tt-dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    min-width: 160px; 
    width: 100%; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    list-style: none; 
    font-size: 14px; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    background-clip: padding-box; 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
    cursor:pointer; 
} 
.tt-dropdown-menu .tt-suggestion { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333333; 
    white-space: nowrap; 
} 
.tt-dropdown-menu .tt-suggestion.tt-cursor { 
    text-decoration: none; 
    outline: 0; 
    background-color: #f5f5f5; 
    color: #262626; 
    cursor:pointer; 
} 
.tt-dropdown-menu .tt-suggestion.tt-cursor a { 
    color: #262626; 
    cursor:pointer; 
} 
.tt-dropdown-menu .tt-suggestion p { 
    margin: 0; 
    cursor:pointer; 
} 
.tt-suggestion.tt-cursor, 
.tt-suggestion:hover { 
    cursor:pointer; 
} 
.tt-suggestion:hover { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */ 
    color: #fff; 
    background-color: #0097cf; 
    cursor: pointer; 
} 

Herkes sorunu geliyor herhangi bir fikir vardır: Aşağıda

benim typeahead.css dosyasıdır?

+1

ve https://twitter.github.io/typeahead.js/examples/ görüntülediğinizde doğru çalışıyor? –

+0

Firefox kullanıyorum. Bağlantıyı firefox kullanarak denedim ve doğru şekilde çalıştı. Ayrıca sadece projemi chrome'da çalıştırmayı denedim, imleç doğru olarak görüntüleniyor – JustLearning

+1

@TimOgilvy Bağlantıyı denemenizi önerdiğiniz için teşekkür ederim. Kullanılan css'yi kullandım .tt-suggestion: hover { imleci: işaretçi; renk: #fff; background-color: # 0097cf; } .tt-suggestion.tt-imleç { color: #fff; background-color: # 0097cf; } 'Bu sorunu çözmüştür. Bu yüzden lütfen devam edin ve cevabınızı ekleyin, böylece doğru şekilde işaretleyebilirim. Teşekkür ederim! – JustLearning

cevap

0
.tt-suggestion:hover { 
cursor: pointer; 
color: #fff; 
background-color: #0097cf; 
} 
.tt-suggestion.tt-cursor { 
color: #fff; 
background-color: #0097cf; 
} 
ne imleç görüyor musunuz İçinde Ne tarayıcı
İlgili konular