Question

我正在尝试使用Webkit外观创建一个搜索字段。但是，我正在绕过它。以下是我创建searchField的方法

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

但是，它没有用。我能得到的最好的是圆形输入字段和平方重叠字段。我甚至无法看到放大镜和取消按钮是否出现。有没有人得到这个观点？我的代码出了什么问题？

Answer 1

很抱歉给你这么坏的消息，但SC高达1.6它将永远不会工作（至少有SC.TextFieldView股票）。如果您查看第580行和第590行之间的SC.TextFieldView的source代码，您将看到它始终呈现为文本字段。要呈现为搜索字段，输入类型应为搜索。您唯一的选择是提供自定义的渲染方法，但不幸的是，这意味着要复制大量的代码行。

Sproutcore - 在searchfield中出现的Webkit

1 个答案: