i'm trying to customize the whole style of the component, and hide the selector image. All graphics style such border, shadows are setted in the previous table. Now i want to remove all style from the selection menu such as the horrible icon to select an item

My original code in jsf:

<h:panelGrid class="dropDown">
  <h:selectOneMenu value="#{myBean.selected}"
  id="list" class="test" style="border-style:none; height:31px;">
    <f:selectItems value="#{myBean.list}" var="item"
    itemLabel="#{item.name}" itemValue="#{item.code}" />
    <f:ajax execute="@this" />
  </h:selectOneMenu>
</h:panelGrid>

This is my style for class .test

.test{
    background-color: white;
    clear: both;
    color: black !important;
    font-family: Helvetica !important;
    font-size: 16px !important;
    height: 30px;
    margin-bottom: 0;
    border-style: none;
}

My page rendered in html:

<select id="list" name="item" class="test" size="1" style="border-style:none; height:31px;"onchange="jsf.util.chain(this,event,'disableBox()','mojarra.ab(this,event,\'valueChange\',\'@this\')')"> 

    <option value="1">al</option>
    ...
    <option value="22">re</option>
</select>

But when i open the webpage from a webview (Android) I still see the icon . Is it impossible to remove if I'm on a simple Webview? Or what element should I use to remove it? Or, it's another component I could use?

My idea is to hide the icon and allow a user to click on the single line, then the Android original component drop down list is opened.

I know that it's styled by the operating system.. any suggestion?

I think it's not usefull.. but I created a simple jsfiddle page where I can test css style modifications. jsfiddle