I have a lookup field called account__c in my object. I am using this on my VF page using apex:inputField. I do get the inputbox as well as the magnifying class icon for me to select the accounts.

I want to hide the inputbox and only show the magnifying glass icon. User should be allowed to click on the icon and choose the account and value should be avialble on account__c .

I thought of hiding the inputbox using css. The id of the inputbox is


and the id for the icon is


Note : the Id of account is ifAccountName in Vf page, the '_lkid' and _lkwgt are generated when i view the pagesource. I also have a style tag defined in my Vf page just below the tag

 <apex:page standardcontroller="Lead" extensions="ctrl_leadConversion" id="Page">
<apex:form id="leadConversionForm">
<apex:pageBlock id="Plock" >
<apex:pageBlockSection columns="1" title="Convert Lead" id="pbSection">
        <apex:pageBlockSectionItem id="pbsiAccountName">
            <apex:outputlabel value="Account name" id="lbAccountName" />
            <apex:inputfield value="{!led.account__c}"  id="ifAccountName"/>


This still doesnt hide the inputbox. Cant seem to figure out what is causing the input box to visible. does any one have a better way of hiding the input box


2 Answers 2


IDs are dynamically assigned to the page when it renders, so I have never had much luck referencing it in CSS or Jquery selectors.

My suggestion would be to use the styleClass attribute on the apex:inputField tag and reference that class name in your CSS selector. So if your class name is className, try

.className input
display:none !important;

If that doesn't work, you might have to use some Jquery.

  • 1
    I actually want to have the lookup icon to be visible but not the textbox. Giving style on the inputfield would hide both the icon and textbox
    – Prady
    Commented Nov 26, 2012 at 12:41
  • 3
    This answer is very close. Creating an apex:inputField creates both <input> and <a> elements; giving your inputField a styleClass of "className" would result in two elements <input class="className"> and <a class="className">. A css rule of input.className { display: none; } is the solution to this problem.
    – Phil Rymek
    Commented Nov 27, 2012 at 0:24

put this in your visualforce page:


define your apex:inputField like so:

<apex:inputField value="{!led.account__c}" styleClass="hidebox"/>

You must log in to answer this question.

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