How to increase width of apex:inputfield for case owner field

Question

Below is the simplest version of VF page where I want to increase the width of Case Owner input field:

<apex:page standardController="Case">
    <apex:form >
        <apex:inputField value="{!Case.Subject}" style="width:350px"/> 
        <apex:inputField value="{!Case.OwnerId}" style="width:350px"/> 
    </apex:form>
</apex:page>

I have tried adding the style , styleclass, wrapping the input field in a <div>. The other text fields are working fine problem is with only case owner field.

But the width is showing as per standard salesforce css.

Please advise if anyone knows how to achieve this.

Answer 1

For lookup fields, the styling will get placed in a <div> wrapper element and not directly on the input itself. What you will have to do is put a styleClass on your field, which will get placed on the <div>, and use the generated HTML structure to correctly target the input element.

For example, if you take this code:

<apex:form>
    <apex:inputField value="{!Case.OwnerId}" styleClass="test"/>
</apex:form>

The generated code will look like this:

You can then target the input with some CSS to achieve your desired result:

<style>
    .test input {width:350px}
</style>