Sproutcore - Webkit appearance in searchfield

I am trying to create a search field with a Webkit appearance. But, I am getting around it. Here is how I create the searchField

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

and here the css part

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

But, it is not working. The best I could get is a rounded input field and a squared one overlapping. I can't even see wheth开发者_运维技巧er the magnifier and the cancel buttons appear or not. Has anybody got around getting that view? what's wrong with my code?

Sorry to give you such a bad news, but with SC up to 1.6 it will never work (at least with the stock SC.TextFieldView). If you look at the source code for SC.TextFieldView between lines 580 and 590 you will see that it is always rendered as a text field. To be rendered as a search field the input type should be search. Your only option is to provide a customized render method, but that, unfortunately, means duplicating lots of lines of code.