Replace default look of SELECT box or dropdownlist on mobile webview

I am using onsen-ui HTML5 UI framework to create my webview mobile app.

With the help of:

  <ons-list-item modifier="tappable">
  </ons-list-item>

On onsen-ui, it does not help inherit existing design into the select box.
An example below.

Default design of the select box on iOS

In this case,
we'll have to write a custom CSS class for the select box to replace the default design.

  .custom-select-box {
    color: inherit;
    font: inherit;
    line-height: initial;
    direction: rtl;
    overflow: hidden;
    height: 40px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    option {
      direction: initial;
    }
  }

the main part which replace the default view is:

directional: inherit;
appearance: none;
border: none;

Final result

Building Cordova iOS app with xcode7 run into "Build failed with Ld build/Debug-iphoneos/ normal armv7" problem

This problem occur because of the enable_bitcode feature of xcode7, and I suspect this occur is because some cordova plugin we're using does not contain bitcode.

In order to solve this problem:
As default value is a "Yes" for iOS, you'll need to disable it on your own.

To do: Disable "Enable Bitcode" setting inside Build Settings.

1. select targeted app
2. select "Build Settings" tab
3. at the search bar under the tabs, search for the keyword "bitcode" (or find it under Build Options)
4. change Enable Bitcode to "No".

Enable Bitcode

Try to Build your app again.

References:
What does enable bitcode do in xcode 7