How to control the width of an apex inputfield in a VisualForce Page

Question

Since the standard Page Layouts don't allow you to adjust the width of an input field bound to a text field, I'm trying to create a VisualForce Page but there isn't a width attribute for the apex:input field component. I think I will have to use styles or CSS or something, but I don't know-how.

What do I need to do to adjust the width of a text inputfield?

Please provide instructions using the web interface (not Force.com IDE). Thanks.

I ended up using an embedded style like this

<apex:inputfield value="{!Country__c.Full_Name__c}" style="width:400px"/>

Answer 1

You must be able to do this using CSS. 

Almost all of the Visualforce tags possess an attribute called styleClass, which is the name of a CSS class to use, i.e.:

<apex:inputText styleClass="myClass" ... />

Converts:

<input type="text" class="myClass" ... />

So working on this you can then define the width using CSS at the top of the page. Here is a full example for a page using the standard Contact controller (no nice formatting though!):

<apex:page standardController="Contact">

    <style type="text/css">

        .myClass { width: 400px; }

    </style>

    <apex:form >

        <apex:outputLabel for="firstName" value="First Name"/>

        <apex:inputText styleClass="myClass" id="firstName" value="{!Contact.FirstName}"/>

    </apex:form>

</apex:page>

This works for <apex:inputField> as well, though be wary of what may happen with different field types. To be more specific with the css (CSS 3 only!) you could do this:

input[type="text"].myClass = { width: 400px; }