My goal is to fully customize the style of a component and hide the selector image. All graphical styles such as borders and shadows have been defined in a previous table. Now, I want to remove all styling from the selection menu, including the icon used to select an item.
This is the 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>
Here is the style for the 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;
}
When this page is rendered in HTML, it looks like this:
<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>
However, when viewing the webpage from a webview on Android, the icon is still present. Is it not possible to remove it in a simple webview? What element should I use to hide it, or is there another component I could use?
I wish to hide the icon and allow users to click on the single line, opening the dropdown list with the default Android component.
Considering that the styling is controlled by the operating system, do you have any suggestions?
To experiment with CSS modifications, I have created a simple JSFiddle page where I can test different styles: JSFiddle