HTML - <select>定制风格

Question

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

Answer 1

The standard JSF html renderkit will render an h:selectOne as a simple html select tag with you f:selectItems becoming the child option tags.

<select>
  <option value="a">a</option>
  <option value="b">b</option>
</select>

so your question is really is there a way to remove the icon from an html select tag. It really has nothing to do with JSF.

Once you've figured out how to write the html and cssto get the effect you want, you can then write a custom renderer to reproduce that html.

Answer 2

Found a working solution with custom css:

Since the component jsf is rendered as , we include all elements inside a , or in this case inside a

<h:panelGrid class="parent 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>

adding the class parent to the panelGrid and defining:

  .parent{
        width:98%;
        overflow:hidden;
    }

    .parent select{
        width:100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        background: none;    
    }

Our jsf component is rendered without the arrow and other components, like borders and shadows.

Answer 3

自定义样式选择仅使用html和css而不是任何js / javascript

`http://jsfiddle.net/suyogN/39tx46L3/`