Ionic select input of colours

Question

I am trying to add a select input of colours. The colours that I want to add as options are the following: http://ionicframework.com/docs/components/#header How can I write the select so that when the user selects a colour, he sees the option as the colour and not as the name of colour?

This is what I have now, it is acceptable when running in browser but when I run from phone, the background colour is not visible and the user only sees the name of the colour:

   <select ng-model="category.colour" required>
                    <option selected style="background-color: white" class="light">light</option>
                    <option style="background-color: cornsilk" class="stable">stable</option>
                    <option style="background-color: DodgerBlue " class="positive">positive</option>
                    <option style="background-color: aqua" class="calm">calm</option>
                    <option style="background-color: YellowGreen" class="balanced">balanced</option>
                    <option style="background-color: Gold" class="energized">energized</option>
                    <option style="background-color: Crimson " class="assertive">assertive</option>
                    <option style="background-color: BlueViolet " class="royal">royal</option>
                    <option style="background-color: black" class="dark">dark</option>
                </select>

Ok. Tested your code. So you're not actually using Ionic framework to change colors, you are using plain CSS. On mobile devices you can't do anything to style those options from select. You have to make your own select using other HTML elements. I don't see another way. Also, it seems kind of ugly to have your dropdown options in multiple colors like that. — Ionut Necula, Nov 07 '16 at 11:12
this may helps u check it http://jsfiddle.net/sai525/xt3xv/370/ — Sa E Chowdary, Nov 07 '16 at 11:16
@SaEChowdary, your code won't help. Will not work on mobile devices. Every device has their own way of styling selects. — Ionut Necula, Nov 07 '16 at 11:18
@Ionut what exactly do you recommend? What different elements should I use for this? — 2dor, Nov 07 '16 at 11:51
@SaEChowdary Ionut is right. That does not help me. It's exactly what I have now. The colours won't appear on mobile devices because the device changes how the select appears on the screen. — 2dor, Nov 07 '16 at 11:52
You can use divs, list elements, etc. And then use JavaScript to make it act lilke a select. — Ionut Necula, Nov 07 '16 at 11:54