Skinning af:selectOneChoice
- by Duncan Mills
A question came in today about how to skin the selection button () of an <af:selectOneChoice>. If you have a delve in the ADF Skinning editor, you'll find that there are selectors for the selectOneChoice when in compact mode (af|selectOneChoice::compact-dropdown-icon-style), however, there is not a selector for the icon in the "normal" mode. I had a quick delve into the skinning source files that you can find in the adf-richclient-impl-11.jar and likewise there seemed to be no association there. However, a quick sample page and a peek with Chrome developer tools revealed the problem. The af:selectOneChoice gets rendered in the browser as a good old <select> element (reasonable enough!). Herein lies the problem, and the reason why there is no skin selector. The <select> HTML element does not have a standard way of replacing the image used for the dropdown button. If you have a search around with your favorite search engine, you can find various workarounds and solutions for this. For example, using Chrome and Safari you can define the following for the select element:
select {
-webkit-appearance: listbox;
background-image: url(blob.png);
background-position: center right;
background-repeat: no-repeat;
}
Which gives a very exciting select box: .
