@@ -23,6 +23,15 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     return undefined;
 }
 
+export function getNativeTextFieldBackgroundColor(searchBar: searchBarModule.SearchBar): colorModule.Color {
+    var textView = getTextView(searchBar.android);
+
+    if (textView) {
+        return new colorModule.Color((<android.graphics.drawable.ColorDrawable>textView.getBackground()).getColor());
+    }
+    return undefined;
+}
+
 export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
     var textView = getTextView(searchBar.android);
 
 
@@ -3,4 +3,5 @@ import * as searchBarModule from "tns-core-modules/ui/search-bar";
 import * as colorModule from "tns-core-modules/color";
 
 export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
+export declare function getNativeTextFieldBackgroundColor(textView: searchBarModule.SearchBar): colorModule.Color;
 export declare function getNativeFontSize(searchBar: searchBarModule.SearchBar): number;
@@ -5,6 +5,11 @@ import { getColor } from "../helper";
 export function getNativeHintColor(searchBar: SearchBar): Color {
     return (<any>searchBar)._placeholderLabel ? getColor((<any>searchBar)._placeholderLabel.textColor) : undefined; 
 }
+
+export function getNativeTextFieldBackgroundColor(searchBar: SearchBar): Color {
+    return (<any>searchBar)._textField ? getColor((<any>searchBar)._textField.backgroundColor) : undefined; 
+}
+
 export function getNativeFontSize(searchBar: SearchBar): number {
     return (<any>searchBar)._textField ? (<any>searchBar)._textField.font.pointSize : undefined;
 }
@@ -28,7 +28,7 @@ export function test_recycling() {
     helper.nativeView_recycling_test(() => new searchBarModule.SearchBar());
 }
 
-export var testSearchBarHintColorAndroid = function () {
+export var testSearchBarHintColor = function () {
     helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
         var searchBar = <searchBarModule.SearchBar>views[0];
 
@@ -50,6 +50,28 @@ export var testSearchBarHintColorAndroid = function () {
     });
 };
 
+export var testSearchBarTextFieldBackgroundColor = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        searchBar.text = "";
+        searchBar.hint = "";
+
+        var expectedNormalizedValue;
+        var actualValue;
+
+        searchBar.textFieldBackgroundColor = new colorModule.Color("blue");
+        expectedNormalizedValue = "#0000FF"; // blue
+        actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
+
+        searchBar.textFieldBackgroundColor = new colorModule.Color("red");
+        expectedNormalizedValue = "#FF0000"; // red
+        actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
+    });
+};
+
 export var testSearchBarFontSize = function () {
     helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
         var searchBar = <searchBarModule.SearchBar>views[0];
@@ -66,6 +88,32 @@ export var testSearchBarFontSize = function () {
     });
 };
 
+export var testSearchBarPropertiesWithCSS = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        const expectedHintColor = "#0000FF"; // blue
+        const expectedTextFieldBackgroundColor = "#FF0000"; // red
+        const expectedFontSize = 30;
+
+        const hintColorActualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
+        const textFieldBackgroundColorActualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        const fontSizeActualValue = searchBarTestsNative.getNativeFontSize(searchBar);
+
+        TKUnit.assert(hintColorActualValue === expectedHintColor, "HintColor - Actual: " + hintColorActualValue + "; Expected: " + expectedHintColor);
+        TKUnit.assert(expectedTextFieldBackgroundColor === textFieldBackgroundColorActualValue, "Text Background Color - Actual: " + textFieldBackgroundColorActualValue + "; Expected: " + expectedTextFieldBackgroundColor);
+        TKUnit.assertAreClose(expectedFontSize, fontSizeActualValue, 0.2, "Font Size - Actual: " + fontSizeActualValue + "; Expected: " + expectedFontSize);
+    }, { pageCss: `
+        SearchBar {
+            text: test;
+            hint: test;
+            text-field-hint-color: blue;
+            text-field-background-color: red;
+            font-size: 30;
+        }
+    `});
+};
+
 export function test_DummyTestForSnippetOnly() {
     // >> article-searching
     var searchBar = new searchBarModule.SearchBar();
 
@@ -481,7 +481,8 @@ export class CssState {
                 if (property in this.view.style) {
                     this.view.style[`css:${property}`] = value;
                 } else {
-                    this.view[property] = value;
+                    const camelCasedProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+                    this.view[camelCasedProperty] = value;
                 }
             } catch (e) {
                 traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,11 @@ import { getColor } from "../helper";`
`5`	`5`	`export function getNativeHintColor(searchBar: SearchBar): Color {`
`6`	`6`	`return (<any>searchBar)._placeholderLabel ? getColor((<any>searchBar)._placeholderLabel.textColor) : undefined;`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+export function getNativeTextFieldBackgroundColor(searchBar: SearchBar): Color {`
	`10`	`+ return (<any>searchBar)._textField ? getColor((<any>searchBar)._textField.backgroundColor) : undefined;`
	`11`	`+}`
	`12`	`+`
`8`	`13`	`export function getNativeFontSize(searchBar: SearchBar): number {`
`9`	`14`	`return (<any>searchBar)._textField ? (<any>searchBar)._textField.font.pointSize : undefined;`
`10`	`15`	`}`