Skip to Main Content

Style APEX popup key LOV text field

APEX Popup Key LOV is useful if you have big list of values. But by default text field not look so nice as field background is grey. Here is how you can style popup key LOV field and add placeholder to inform user e.g. click icon to select value. If you are on APEX 3.x you need load jQuery library on page HTML header.

Create popup key LOV to your page and add page HTML header

<script type="text/javascript">
$(function(){
 $("#Px_MY_ITEM").blur(function(){
  setPlaceholder(this);
 }).css({
  "height":"17px",
  "color":"#777",
  "background-color":"#FFF",
  "border":"1px solid #AAA",
  "padding-left":"3px"
 }).blur(); 
});
function setPlaceholder(p){
 if(!$v(p)){
  $s(p,"Click icon to select ->");
 }
}
</script>

Change Px_MY_ITEM to your popup key LOV item name. If your allow select null value from popup add to item HTML Form Element Attributes

onchange="setPlaceholder(this);"

This is needed to set place holder text when null value is selected.

Comments

No comments yet on this post