Sproutcore - 在searchfield中的Webkit外觀

我試圖創建一個帶有Webkit外觀的搜索字段。但是，我正在解決它。這裏是我創建searchFieldSproutcore - 在searchfield中的Webkit外觀

mySearchView: SC.TextFieldView.design({ 
    layerId: 'searchView', 
    layout: {height: 20, width: 120, centerY: 0, right: 240}, 
    hint: 'Search', 
    classNames: ['searchField'] 
}),

，這裏的CSS部分

.searchField { 
    background: none !important; 
    outline: none !important; 
    -webkit-appearance: searchfield !important; 
} 

.searchField input[type="search"] { 
    -webkit-appearance: searchfield !important; 
    -webkit-box-sizing: border-box !important; 
} 

.searchField input[type="search"]::-webkit-search-cancel-button 
{ 
    -webkit-appearance: searchfield-cancel-button !important; 
} 

.searchField input[type="search"]::-webkit-search-decoration { 
    -webkit-appearance: searchfield-decoration !important; 
} 

.searchField input[type="search"]::-webkit-search-results-decoration { 
    -webkit-appearance: searchfield-results-decoration !important; 
} 

.searchField input[type="search"]::-webkit-search-results-button 
{ 
    -webkit-appearance: searchfield-results-button !important; 
}

但是，這是行不通的。我能得到的最好是一個舍入的輸入字段和一個重疊的平方字符。我什至不能看到放大鏡和取消按鈕是否出現。有沒有人得到這個觀點？我的代碼有什麼問題？

來源

2011-06-07 joque

對不起，給你這樣一個壞消息，但隨着SC高達1.6，它永遠不會工作（至少與股票SC.TextFieldView）。如果您在第580行和第590行之間查看SC.TextFieldView的source代碼，您將看到它始終呈現爲文本字段。要呈現爲搜索字段，輸入類型應該是搜索。您唯一的選擇是提供自定義的渲染方法，但不幸的是，這意味着複製了大量的代碼行。

來源

2011-08-10 21:03:52 unicoletti

Sproutcore - 在searchfield中的Webkit外觀

回答

相關問題