I am creating a VF page and want to show a custom pick list created dynamically in my controller as an inline editor for a custom value. Both the value and list are custom properties of my controller and not bound directly to any fields of an SObject.

An example of what I want is the Status field on the standard Case layout: it is displayed as a text value, but when you double-click it, a pick list is displayed as an inline editor.

enter image description here

Is it possible to implement the same type of an inline editor in a Visualforce page?

I know how to display a picklist using the selectList tag, but it always shows the picklist while I want it to be displayed as just a label when the inline editor is not active.

1 Answer 1


All you need to do is use a apex:outputField together with a picklist field of the selected sObject. Then the Salesforce will take care about the rest:


Account acc { get; set; }

public MyClass(){
    acc = [Select MyPicklist__c From Account Where Id = 'XXXXX'];


<apex:pageBlock mode="inlineEdit">
        <apex:outputField value="{!acc.MyPicklist__c}">
            <apex:inlineEditSupport event="onclick"/>


Well, i think here you can only do some trix. Here is my thought how it could be implemented with some CSS rules only. The idea is to hide appearance of the list (down arrow) and only show it if the element gets focused. Additionaly i will add some usual SFDC styles to the element:

/* A normal state of the picklist, no combobox styles, only text displayed */
.mySelect {
    font-size: 12px;
    color: #000;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
/* Focused (clicked) state of the picklist, a normal combobox style displayed */
.mySelect:focus {
    -webkit-appearance: menulist ;
    appearance: menulist ;
    border: 1px solid #000;
    background: white;
    margin: 0;
/* Just some additional styles to get SFDC look & feel */
.mySelect:hover {
    background: url(/img/func_icons/util/pencil12.gif) no-repeat center right 2px  #e3f3ff;

<apex:pageBlock mode="inlineEdit">
    <apex:pageBlockSection >

        <apex:pageBlockSectionItem >
            <apex:outputLabel >Blaa</apex:outputLabel>
            <apex:selectList styleClass="mySelect" multiselect="false" size="1" >
                <apex:selectOption itemLabel="Option 1" itemValue="1"/>
                <apex:selectOption itemLabel="Option 2" itemValue="2"/>


It looks like this then:

enter image description here

  • Thank you for the response, but this will not work for my case. It seems that I did not explain my situation well. My bad. Both the value and the list are not fields of an SObject. They are dynamically created values in the controller. I have updated my question. Commented Mar 10, 2014 at 14:04
  • @DmitryN Updated my answer, i hope it helps. Commented Mar 10, 2014 at 16:29
  • Great, this works! Thank you. I just modified styles slightly to make this work in Firefox: .mySelect { ... text-indent: 0.01px; text-overflow: ''; } .mySelect:focus { ... text-indent: 0; text-overflow: clip; } Commented Mar 11, 2014 at 6:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .