How can i hide the input box for a lookup? maybe using css

Question

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

 Page1:Form:Pblock:pbSection:pbsiAccountName:ifAccountName_lkid

and the id for the icon is

Page1:Form:Pblock:pbSection:pbsiAccountName:ifAccountName_lkwgt

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">
<style> 
#leadConversionPage:leadConversionForm:pBConvertLead:pbSectionLeadSection:pbsiAccountName:ifAccountName_lkid
{
display:none;
}
</style>
<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"/>

        </apex:pageBlockSectionItem>
       </apex:pageBlockSection>
     <apex:pageBlock>
 <apex:form>
<apex:page>

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

Thanks

Answer 1

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.

Answer 2

put this in your visualforce page:

<style>
  input.hidebox 
  {
     display:none;
  }
</style>

define your apex:inputField like so:

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