Skinning af:selectOneChoice
Posted
by Duncan Mills
on Oracle Blogs
See other posts from Oracle Blogs
or by Duncan Mills
Published on Fri, 13 Apr 2012 05:29:48 -0500
Indexed on
2012/04/13
11:37 UTC
Read the original article
Hit count: 881
/ADF/ADF Faces and UI
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: .
© Oracle Blogs or respective owner