Mult-select picklist styling in Visual Force page

Question

I am trying to use the standard right-left multi-select picklist in my VF Page so it looks something like this:

I have tried this:

<apex:inputField value="{!Request_for_System_Change__c.Benefits_Reasons__c}"/>     

Unfortunately the default looks like this:

and when I try to style it as below:

<apex:inputField value="{!Request_for_System_Change__c.Benefits_Reasons__c}" style="width: 100px; height: 100px"/>

it looks like this:

So how on earth can I get this to look good?

In the standard field definition the picklist is defined as below with visible lines:

Answer 1

I think css is overriding the dropdown css in page.

Please check css static resource or style in page with '.select' and change accordingly.

Answer 2

As you have standardStylesheets="false" showHeader="false". SO you have only option left is try to manually style this using the standardfield css. Use this field in some page and copy css from their and use it in your code.

Otherwise you can use https://github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist . Select which method suits you better. I think in your case first approach is better.

Answer 3

as Arun and Tushar have said, the org styles were affecting the select element.

so I changed it to include inline style as below

 style="height:auto !important;"

and now it works