Q:

VisualForce page with SLDS: apex:inputField lookup button way too big

I have the following piece of code:
<div class="slds-p-horizontal--small slds-size--5-of-12">
    <label class="slds-form-element__label" for="select-01">Campaign</label>
    <div class="slds-form-element__control">
        <apex:inputField value="{!campaignLookup}" styleClass="slds-input"/>    
    </div>
</div>

It's all working as intended, except there is one style issue.
If I remove the styleClass, then the lookup button still works, it just looks hideous.
If I add the styleClass, it looks just like SLDS (in fact, it IS slds), and I get a text field that is 5-of-12 width, and a button besides it which opens a lookup window.
This button is ALSO 5-of-12 width, meaning I have twice the intended size (simply put: it's WAY too big). 
How do I fix it so that I have only once a 5-of-12 size? I don't care if the textfield is 5-of-12 and the button is just slightly over the border, but I don't want the button to have an enormous div for only 32*32 pixels ever.
Edit: Fix:
<style>
    .lookupInput a { 
        border: none !important;
        width: 60px !important ;
    }
</style>

This removes the border and sets the width of the lookup icon to precisely 60 pixels, instead of the enormous div the text field also has.

A:

Lightning design system do not supports apex input filed. Try to create custom CSS styles for lookups and other field types

