diff --git a/.gitignore b/.gitignore
index 5f5ccfc..16ed84a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,9 @@ src/**/*.d.ts
 !demo/karma.conf.js
 !demo/app/tests/*.js
 demo/platforms/
+demo/outputs/
+demo-angular/outputs/
+demo-vue/outputs/
 demo-angular/platforms/
 demo-vue/platforms/
 !demo/e2e-tests/*
diff --git a/README.md b/README.md
index 6ba2f6f..7d2395c 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ The `PickerField` is a NativeScript `TextField` which means that any functionali
 ## Styling
 
 ### PickerField
-The `PickerField` inherits from the `TextField` class of the `tns-core-modules/ui/text-field/text-field` module which means all of the available styling of `TextField` are available directly. Additionally the `PickerField` opens a modal window contains a `ListView` instance which inherits the css class of the `PickerField` meaning you can style that ListView elements with the use of `ListView.<your-class-name>` and simply set the `class` of the `PickerField` to `your-class-name`. The modal window also contains its own ActionBar which again inherits the css class of the `PickerField` and can be styling the same way as described above for the ListView. For full list of the available properties of which many can be styling/set via css you can refer the official API documentation of ListView [here](https://docs.nativescript.org/api-reference/modules/_ui_list_view_).
+The `PickerField` can be targeted in CSS through its element selector and additionally by setting a class. The `PickerField` also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the `PickerPage` selector and through it style all picker modals with selectors like `PickerPage ActionBar` and `PickerPage ListView`. In addition to that, if you set a class on the PickerField, it will be transferred on the `PickerPage` and with it you can style individual modals.
     
 ## Contribute
 We love PRs! Check out the [contributing guidelines](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-picker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
diff --git a/demo-angular/e2e/helper.ts b/demo-angular/e2e/helper.ts
index 77bff5f..b370b50 100644
--- a/demo-angular/e2e/helper.ts
+++ b/demo-angular/e2e/helper.ts
@@ -1,8 +1,6 @@
 import { AppiumDriver, SearchOptions, Direction, UIElement } from "nativescript-dev-appium";
 import { runType } from "nativescript-dev-appium/lib/parser";
 
-const isAndroid: boolean = runType.includes("android");
-
 export const QUEUE_WAIT_TIME: number = 600000; // Sometimes SauceLabs threads are not available and the tests wait in a queue to start. Wait 10 min before timeout.
 
 export async function navigateBackToHome(driver: AppiumDriver, view?: string) {
@@ -21,7 +19,7 @@ export async function navigateBackToView(driver: AppiumDriver, view: string) {
 
 export async function scrollToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {
@@ -37,7 +35,7 @@ export async function scrollToElement(driver: AppiumDriver, element: string, dir
 
 export async function scrollToElementInListView(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.ListView");
     }
     else {
@@ -63,7 +61,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
         swipeX = 10;
     }
 
-    if (isAndroid) {
+    if (driver.isAndroid) {
         const wd = driver.wd();
         const action = new wd.TouchAction(driver.driver);
         action.press({ x: centerX, y: centerY })
@@ -85,7 +83,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
 
 export async function swipeToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {
diff --git a/demo-angular/e2e/tsconfig.json b/demo-angular/e2e/tsconfig.json
index 0c3f525..2b7aa4b 100644
--- a/demo-angular/e2e/tsconfig.json
+++ b/demo-angular/e2e/tsconfig.json
@@ -5,6 +5,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "importHelpers": false,
+    "sourceMap": true,
     "types": [
       "mocha",
       "chai",
diff --git a/demo-angular/package.json b/demo-angular/package.json
index e21d8d5..03f8b10 100644
--- a/demo-angular/package.json
+++ b/demo-angular/package.json
@@ -30,7 +30,7 @@
     "nativescript-theme-core": "~1.0.4",
     "reflect-metadata": "~0.1.10",
     "rxjs": "~6.4.0",
-    "tns-core-modules": "~5.2.0",
+    "tns-core-modules": "~5.2.2",
     "zone.js": "~0.8.18"
   },
   "devDependencies": {
@@ -45,8 +45,8 @@
     "mocha-multi": "~1.0.1",
     "mochawesome": "^3.1.1",
     "nativescript-dev-appium": "^5.1.0",
-    "nativescript-dev-typescript": "~0.8.0",
-    "nativescript-dev-webpack": "~0.20.0",
+    "nativescript-dev-typescript": "~0.9.0",
+    "nativescript-dev-webpack": "~0.20.3",
     "tslint": "~5.11.0"
   },
   "readme": "NativeScript PickerField Demo NG"
diff --git a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css
index d9da0b3..17590f2 100644
--- a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css
+++ b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css
@@ -4,7 +4,7 @@
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .label-center {
@@ -26,7 +26,7 @@
     background-color: #F5C518;
 }
 
-ListView.picker-field {
+.picker ListView {
     background-color: green;
     margin-left: 20;
     margin-right: 20;
@@ -34,13 +34,11 @@ ListView.picker-field {
     separator-color: red;
 }
 
-ActionBar.picker-field {
-    background-color:yellow;
-    color:black;
+PickerPage ActionBar {
+    background-color: red;
+    color: white;
 }
 
-.picker-field { }
-
 .field-name-label {
     font-size: 20;
     font-weight: bold;
@@ -48,4 +46,4 @@ ActionBar.picker-field {
 
 .submit-button {
     margin: 20;
-}
\ No newline at end of file
+}
diff --git a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html
index 6561161..bdad75e 100644
--- a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html
+++ b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html
@@ -4,9 +4,9 @@
 <GridLayout rows="100, *" columns="*, *" [formGroup]="movieForm" class="yellow-grid">
     <Label row="0" col="0" text="Pick a movie:" class="black-label label-center field-name-label"></Label>
     <PickerField #picker row="0" col="1" formControlName="movie" hint="select a movie" padding="10" pickerTitle="Pick a movie"
-        class="picker-field" modalClass="myModal" valueField="id" textField="name" [items]="pickerItems">
+        class="picker" valueField="id" textField="name" [items]="pickerItems">
         <ng-template let-item="item">
-            <GridLayout rows="auto, *" columns="*, auto" class="yellow-grid">
+            <GridLayout rows="auto, *" columns="*, auto">
                 <Label [text]="item.name" colSpan="2" class="black-label item-template-top-label"></Label>
                 <Label [text]="item.year" col="0" row="1" class="item-template-label" marginBottom="20"></Label>
                 <Image [src]="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
@@ -17,4 +17,4 @@
     <GridLayout row="1" col="0" colSpan="2" rows="auto, *" backgroundColor="white">
         <Button class="submit-button" text="Submit form" (tap)="onSubmit()"></Button>
     </GridLayout>
-</GridLayout>>
\ No newline at end of file
+</GridLayout>>
diff --git a/demo-angular/src/app/examples/styling/styling-example.component.css b/demo-angular/src/app/examples/styling/styling-example.component.css
index 11a53f4..f28966b 100644
--- a/demo-angular/src/app/examples/styling/styling-example.component.css
+++ b/demo-angular/src/app/examples/styling/styling-example.component.css
@@ -4,7 +4,7 @@
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .green-label {
@@ -21,7 +21,7 @@
     color: green;
 }
 
-ListView.picker-field {
+.picker-field ListView {
     background-color: lightblue;
     margin-left: 20;
     margin-right: 20;
@@ -30,7 +30,7 @@ ListView.picker-field {
     color: blue;
 }
 
-ActionBar.picker-field {
+.picker-field ActionBar {
     background-color:yellow;
     color:black;
 }
@@ -42,4 +42,4 @@ ActionBar.picker-field {
     margin-left: 100;
 }
 
-/* Styling css end */
\ No newline at end of file
+/* Styling css end */
diff --git a/demo-angular/src/app/examples/styling/styling-example.component.html b/demo-angular/src/app/examples/styling/styling-example.component.html
index 5910ddc..0df04d7 100644
--- a/demo-angular/src/app/examples/styling/styling-example.component.html
+++ b/demo-angular/src/app/examples/styling/styling-example.component.html
@@ -6,7 +6,7 @@
         [items]="pickerItems" [pickerTitle]="pickerTitle" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left"
         androidCloseButtonPosition="actionBar" androidCloseButtonIcon="ic_media_previous">
         <ng-template let-item="item">
-            <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+            <GridLayout columns="auto, *" rows="auto, *">
                 <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
                 <Label [text]="item.name" col="0" row="1" class="item-template-label red-label"
                     marginBottom="20"></Label>
@@ -14,4 +14,4 @@
             </GridLayout>
         </ng-template>
     </PickerField>
-</GridLayout>>
\ No newline at end of file
+</GridLayout>>
diff --git a/demo-angular/src/app/examples/value-api/value-api.component.css b/demo-angular/src/app/examples/value-api/value-api.component.css
index 52d9392..63657d4 100644
--- a/demo-angular/src/app/examples/value-api/value-api.component.css
+++ b/demo-angular/src/app/examples/value-api/value-api.component.css
@@ -17,7 +17,7 @@
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .green-label {
@@ -31,15 +31,23 @@
 /* Styling css start */
 
 
-ListView.picker-field {
-    background-color: green;
+PickerPage.picker-field {
+    background-color: lightgoldenrodyellow;
+}
+
+.picker-field ListView {
     margin-left: 20;
     margin-right: 20;
     margin-bottom: 20;
     separator-color: red;
 }
 
-.picker-field {
+.picker-field ActionBar {
+    background-color: #369;
+    color: #fff;
+}
+
+PickerField.picker-field {
     background-color: lightblue;
     color: blue;
 }
@@ -51,4 +59,4 @@ ListView.picker-field {
     margin-left: 100;
 }
 
-/* Styling css end */
\ No newline at end of file
+/* Styling css end */
diff --git a/demo-angular/src/app/examples/value-api/value-api.component.html b/demo-angular/src/app/examples/value-api/value-api.component.html
index 94862ff..6d04bd5 100644
--- a/demo-angular/src/app/examples/value-api/value-api.component.html
+++ b/demo-angular/src/app/examples/value-api/value-api.component.html
@@ -5,7 +5,7 @@
     <PickerField #myPicker hint="Click here" padding="10" id="myPicker" [items]="pickerItems"
         textField="description" valueField="name" pickerTitle="Select item from list">
         <ng-template let-item="item">
-            <GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
+            <GridLayout rows="auto, auto, auto">
                 <Label [text]="item.id" class="item-template-label red-label" margin="20"></Label>
                 <Label [text]="item.name" row="1" class="item-template-label green-label"></Label>
                 <Label [text]="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
@@ -13,4 +13,4 @@
         </ng-template>
     </PickerField>
     <Button (tap)="checkTap()" text="Check picker value APIs" row="1"></Button>
-</GridLayout>>
\ No newline at end of file
+</GridLayout>>
diff --git a/demo-vue/app/components/GettingStarted.vue b/demo-vue/app/components/GettingStarted.vue
index 5440c46..23c037c 100644
--- a/demo-vue/app/components/GettingStarted.vue
+++ b/demo-vue/app/components/GettingStarted.vue
@@ -35,5 +35,5 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 </style>
diff --git a/demo-vue/app/components/Home.vue b/demo-vue/app/components/Home.vue
index 9b5a7aa..3f0c610 100644
--- a/demo-vue/app/components/Home.vue
+++ b/demo-vue/app/components/Home.vue
@@ -38,7 +38,7 @@ export default {
   };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 .itemStackLayout {
   text-align: left;
diff --git a/demo-vue/app/components/Styling.vue b/demo-vue/app/components/Styling.vue
index 298445c..445b6bb 100644
--- a/demo-vue/app/components/Styling.vue
+++ b/demo-vue/app/components/Styling.vue
@@ -9,14 +9,14 @@
                   padding="10"
                   :pickerTitle="pickerTitle"
                   for="item in pickerObjects"
-                  class="picker-field" 
+                  class="picker-field"
                   textField="name"
-                  iOSCloseButtonIcon="14" 
+                  iOSCloseButtonIcon="14"
                   iOSCloseButtonPosition="left"
                   androidCloseButtonPosition="actionBar"
                   androidCloseButtonIcon="ic_media_previous">
         <v-template>
-          <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+          <GridLayout columns="auto, *" rows="auto, *">
             <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
             <Label :text="item.name" col="0" row="1" class="item-template-label red-label"
                 marginBottom="20"></Label>
@@ -64,7 +64,7 @@ export default {
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .red-label {
@@ -75,7 +75,7 @@ export default {
     color: green;
 }
 
-ListView.picker-field {
+.picker-field ListView {
     background-color: lightblue;
     margin-left: 20;
     margin-right: 20;
@@ -84,7 +84,7 @@ ListView.picker-field {
     color: blue;
 }
 
-ActionBar.picker-field {
+.picker-field ActionBar {
     background-color:yellow;
     color:black;
 }
diff --git a/demo-vue/app/components/ValueApis.vue b/demo-vue/app/components/ValueApis.vue
index 5b43290..3fcdff1 100644
--- a/demo-vue/app/components/ValueApis.vue
+++ b/demo-vue/app/components/ValueApis.vue
@@ -3,8 +3,8 @@
     <ActionBar :title="title">
       <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
     </ActionBar>
-    <GridLayout rows="50, 50, *">
-      <PickerField hint="Click here" 
+    <GridLayout rows="60, 50, *">
+      <PickerField hint="Click here"
                   ref="apiPicker"
                   row="0"
                   padding="10"
@@ -13,7 +13,7 @@
                   valueField="name"
                   pickerTitle="Select item from list">
         <v-template>
-          <GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
+          <GridLayout rows="auto, auto, auto">
             <Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
             <Label :text="item.name" row="1" class="item-template-label green-label"></Label>
             <Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
@@ -64,18 +64,27 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "../app-variables";
 
-.item-template-label {
-    margin-left: 20;
-}
+  .item-template-label {
+      margin-left: 20;
+  }
+
+  .green-label {
+      color: green;
+  }
 
-.green-label {
-    color: green;
-}
+  .red-label {
+      color: red;
+  }
+
+  PickerField.picker {
+    margin: 10;
+    height: 40;
+    color: #fff;
+    placeholder-color: #DDD;
+    background: #404040;
+  }
 
-.red-label {
-    color: red;
-}
 </style>
diff --git a/demo-vue/e2e/helper.ts b/demo-vue/e2e/helper.ts
index 4d009ba..db2b3cb 100644
--- a/demo-vue/e2e/helper.ts
+++ b/demo-vue/e2e/helper.ts
@@ -1,8 +1,6 @@
 import { AppiumDriver, SearchOptions, Direction, UIElement } from "nativescript-dev-appium";
 import { runType } from "nativescript-dev-appium/lib/parser";
 
-const isAndroid: boolean = runType.includes("android");
-
 export const QUEUE_WAIT_TIME: number = 600000; // Sometimes SauceLabs threads are not available and the tests wait in a queue to start. Wait 10 min before timeout.
 
 export async function navigateBackToHome(driver: AppiumDriver, view?: string) {
@@ -21,7 +19,7 @@ export async function navigateBackToView(driver: AppiumDriver, view: string) {
 
 export async function scrollToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {
@@ -37,7 +35,7 @@ export async function scrollToElement(driver: AppiumDriver, element: string, dir
 
 export async function scrollToElementInListView(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.ListView");
     }
     else {
@@ -63,7 +61,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
         swipeX = 10;
     }
 
-    if (isAndroid) {
+    if (driver.isAndroid) {
         const wd = driver.wd();
         const action = new wd.TouchAction(driver.driver);
         action.press({ x: centerX, y: centerY })
@@ -85,7 +83,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
 
 export async function swipeToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {
diff --git a/demo-vue/e2e/tsconfig.json b/demo-vue/e2e/tsconfig.json
index 6c93b0e..a86cdf1 100644
--- a/demo-vue/e2e/tsconfig.json
+++ b/demo-vue/e2e/tsconfig.json
@@ -6,6 +6,7 @@
     "emitDecoratorMetadata": true,
     "noEmitHelpers": true,
     "importHelpers": true,
+    "sourceMap": true,
     "types": [
       "mocha",
       "chai",
diff --git a/demo-vue/package.json b/demo-vue/package.json
index 60d76df..4961428 100644
--- a/demo-vue/package.json
+++ b/demo-vue/package.json
@@ -19,8 +19,8 @@
   "dependencies": {
     "nativescript-picker": "file:../src",
     "nativescript-theme-core": "~1.0.4",
-    "nativescript-vue": "~2.0.0",
-    "tns-core-modules": "~5.2.0"
+    "nativescript-vue": "~2.2.0",
+    "tns-core-modules": "~5.2.2"
   },
   "devDependencies": {
     "@babel/core": "~7.2.0",
@@ -34,9 +34,9 @@
     "mocha-multi": "~1.0.1",
     "mochawesome": "^3.1.1",
     "nativescript-dev-appium": "^5.1.0",
-    "nativescript-dev-typescript": "~0.8.0",
-    "nativescript-dev-webpack": "~0.20.0",
-    "nativescript-vue-template-compiler": "~2.0.2",
+    "nativescript-dev-typescript": "~0.9.0",
+    "nativescript-dev-webpack": "^0.20.3",
+    "nativescript-vue-template-compiler": "~2.2.0",
     "node-sass": "~4.9.0",
     "vue-loader": "~15.4.0"
   },
diff --git a/demo-vue/tsconfig.json b/demo-vue/tsconfig.json
index c030f55..20970ff 100644
--- a/demo-vue/tsconfig.json
+++ b/demo-vue/tsconfig.json
@@ -31,5 +31,5 @@
         "../src/node_modules",
         "node_modules",
         "platforms"
-    ],
-}
\ No newline at end of file
+    ]
+}
diff --git a/demo/app/app.css b/demo/app/app.css
index 8869dc9..53d67ac 100644
--- a/demo/app/app.css
+++ b/demo/app/app.css
@@ -17,7 +17,7 @@
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .green-label {
@@ -30,8 +30,12 @@
 
 /* Styling css start */
 
+.picker-field ActionBar {
+    color: #fff;
+    background-color: blue;
+}
 
-ListView.picker-field {
+.picker-field ListView {
     background-color: lightblue;
     margin-left: 20;
     margin-right: 20;
@@ -51,4 +55,4 @@ ListView.picker-field {
     margin-left: 100;
 }
 
-/* Styling css end */
\ No newline at end of file
+/* Styling css end */
diff --git a/demo/app/examples/styling/styling-page.xml b/demo/app/examples/styling/styling-page.xml
index 226c922..3a709fc 100644
--- a/demo/app/examples/styling/styling-page.xml
+++ b/demo/app/examples/styling/styling-page.xml
@@ -11,7 +11,7 @@
 								androidCloseButtonPosition="actionBar"
 								androidCloseButtonIcon="ic_media_previous">
 			<picker:PickerField.itemTemplate>
-				<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+				<GridLayout columns="auto, *" rows="auto, *">
 					<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
 					<Label text="{{ name }}" col="0" row="1" class="item-template-label red-label" marginBottom="20"/>
 					<Image src="{{ imageUrl }}" col="1" row="0" rowSpan="2" class="item-template-picture" />
@@ -19,4 +19,4 @@
 			</picker:PickerField.itemTemplate>
 		</picker:PickerField>
 	</GridLayout>
-</navigation:ExamplePage>
\ No newline at end of file
+</navigation:ExamplePage>
diff --git a/demo/app/examples/value-api/value-api-page.xml b/demo/app/examples/value-api/value-api-page.xml
index 0c7a8d2..5d27ee3 100644
--- a/demo/app/examples/value-api/value-api-page.xml
+++ b/demo/app/examples/value-api/value-api-page.xml
@@ -6,14 +6,14 @@
 								valueField="name"
 								pickerTitle="Select item from list">
 			<picker:PickerField.itemTemplate>
-				<GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
+				<GridLayout rows="auto, auto, auto">
 					<Label text="{{ 'ID: ' +  id }}" class="item-template-label red-label" margin="20"/>
 					<Label text="{{ name }}" row="1" class="item-template-label green-label" />
 					<Label text="{{ description }}" row="2" class="item-template-label green-label" marginBottom="20" />
 				</GridLayout>
 			</picker:PickerField.itemTemplate>
 		</picker:PickerField>
-	
+
 		<Button tap="checkTap" text="Check picker value APIs" row="1" />
 	</GridLayout>
-</navigation:ExamplePage>
\ No newline at end of file
+</navigation:ExamplePage>
diff --git a/demo/package.json b/demo/package.json
index d676123..c8f894e 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "nativescript-picker": "file:../src",
     "nativescript-theme-core": "~1.0.4",
-    "tns-core-modules": "~5.2.0"
+    "tns-core-modules": "~5.2.2"
   },
   "devDependencies": {
     "@types/chai": "~4.1.7",
@@ -22,8 +22,8 @@
     "mocha-multi": "~1.0.1",
     "mochawesome": "^3.1.1",
     "nativescript-dev-appium": "5.0.0",
-    "nativescript-dev-typescript": "~0.8.0",
-    "nativescript-dev-webpack": "~0.20.0",
+    "nativescript-dev-typescript": "~0.9.0",
+    "nativescript-dev-webpack": "~0.20.3",
     "tslint": "~5.11.0"
   },
   "scripts": {
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index e5a86c7..f6af24f 100644
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
-        "target": "es5",
         "module": "commonjs",
+        "target": "es5",
         "declaration": false,
         "removeComments": true,
         "noLib": false,
@@ -40,4 +40,4 @@
         "platforms"
     ],
     "compileOnSave": false
-}
\ No newline at end of file
+}
diff --git a/src/angular/nativescript-picker.accessors.ts b/src/angular/nativescript-picker.accessors.ts
index b4206e5..fd212b4 100644
--- a/src/angular/nativescript-picker.accessors.ts
+++ b/src/angular/nativescript-picker.accessors.ts
@@ -20,9 +20,9 @@ const PICKER_VALUE_ACCESSOR = {
  */
 @Directive({
     selector: "PickerField[ngModel],PickerField[formControlName],PickerField[formControl]," +
-        "PickerField[ngModel],PickerField[formControlName],PickerField[formControl]," +
-        "PickerField[ngModel],PickerField[formControlName],PickerField[formControl]," +
-        "picker-text-field[ngModel],picker-text-field[formControlName],picker-text-field[formControl]",
+        "pickerfield[ngModel],pickerfield[formControlName],pickerfield[formControl]," +
+        "pickerField[ngModel],pickerField[formControlName],pickerField[formControl]," +
+        "picker-field[ngModel],picker-field[formControlName],picker-field[formControl]",
     providers: [PICKER_VALUE_ACCESSOR],
     host: {
         "(selectedValueChange)": "onChange($event.value)",
diff --git a/src/package.json b/src/package.json
index d980ec5..1d434eb 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
     "name": "nativescript-picker",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "description": "A NativeScript plugin that provides a custom TextField which lets you pick a value from a list opened in a modal popup.",
     "main": "picker",
     "typings": "index.d.ts",
@@ -48,8 +48,8 @@
     "homepage": "https://github.com/NativeScript/nativescript-picker",
     "readmeFilename": "README.md",
     "devDependencies": {
-        "tns-core-modules": "^5.2.0",
-        "tns-platform-declarations": "^5.2.0",
+        "tns-core-modules": "^5.2.2",
+        "tns-platform-declarations": "^5.2.2",
         "typescript": "~3.1.6",
         "prompt": "^1.0.0",
         "rimraf": "^2.6.2",
@@ -67,7 +67,7 @@
         "@angular/router": "~7.2.0",
         "rxjs": "~6.4.0",
         "zone.js": "~0.8.26",
-        "nativescript-vue": "~2.0.0"
+        "nativescript-vue": "~2.2.0"
     },
     "dependencies": {}
 }
diff --git a/src/picker.common.ts b/src/picker.common.ts
index 72603d1..5cfb653 100644
--- a/src/picker.common.ts
+++ b/src/picker.common.ts
@@ -1,5 +1,5 @@
 import { Observable } from 'tns-core-modules/data/observable';
-import { Property, Template, booleanConverter } from "tns-core-modules/ui/core/view/view";
+import { Property, Template, booleanConverter, CSSType } from "tns-core-modules/ui/core/view/view";
 import { View, EventData } from "tns-core-modules/ui/core/view/view";
 import { TextField } from 'tns-core-modules/ui/text-field/text-field';
 import { Button } from 'tns-core-modules/ui/button/button';
@@ -28,6 +28,11 @@ export interface PickerField {
     on(event: "itemLoading", callback: (args: ItemEventData) => void, thisArg?: any);
 }
 
+// Allow targeting PickerPage through CSS element selector
+@CSSType("PickerPage")
+export class PickerPage extends Page {}
+
+@CSSType("PickerField")
 export class PickerField extends TextField implements TemplatedItemsView {
 
     public static itemLoadingEvent = "itemLoading";
@@ -62,7 +67,7 @@ export class PickerField extends TextField implements TemplatedItemsView {
 
     private createModalView() {
         this._modalRoot = new Frame();
-        this._page = new Page();
+        this._page = new PickerPage();
         this._modalListView = new ListView();
         this._modalGridLayout = new GridLayout();
         this.initModalView();
@@ -80,6 +85,8 @@ export class PickerField extends TextField implements TemplatedItemsView {
     }
 
     private initModalView() {
+        this.applyCssScope(this._page, true);
+
         if (this.pickerTitle && this.pickerTitle !== "") {
             this._page.actionBar.title = this.pickerTitle;
         } else {
@@ -95,6 +102,8 @@ export class PickerField extends TextField implements TemplatedItemsView {
             this.closeCallback(undefined, undefined);
         });
 
+        this.applyCssScope(<any>actionItem);
+
         if (actionItem.ios) {
             actionItem.ios.position = this.iOSCloseButtonPosition;
             actionItem.ios.systemIcon = this.iOSCloseButtonIcon;
@@ -114,10 +123,11 @@ export class PickerField extends TextField implements TemplatedItemsView {
         this.applyCssScope(this._modalListView);
         this._modalListView.items = this.items;
 
+        this.applyCssScope(this._modalGridLayout);
         (<any>this._modalGridLayout).addChild(this._modalListView);
     }
 
-    private applyCssScope(view: View) {
+    private applyCssScope(view: View, transferClasses: Boolean = false) {
         const ngKey = Object.keys(this).find(key => key.startsWith('_ngcontent'));
         const vueKey = Object.keys(this).find(key => key.startsWith('data-v'));
         if (ngKey) {
@@ -128,7 +138,7 @@ export class PickerField extends TextField implements TemplatedItemsView {
             view[vueKey] = this[vueKey];
         }
 
-        if (this.className) {
+        if (transferClasses && this.className) {
             let classNames = this.className.split(' ');
             classNames.forEach(element => {
                 view.cssClasses.add(element);