Is it possible to add style to a field in Salesfor

Question

I have a situation where I need to convert input text to upper case. As soon as we type some text in the input field it needs to convert it to Upper case.

We have following css style for this:

 style="text-transform: uppercase"

Using this style, text is entered in Upper case automatically so we don't need to do anything extra, but there is no option in Salesforce to add style to a field.

Is there any way to accomplish this?

Answer 1

Unfortunately, there isn't an easy way to add a CSS style to a field appearing on a Standard Page Layout in edit mode. However, there are some options (listed below) you may want to explore.

---

Visualforce

You can add a style attribute to an [inputtext] in Visualforce (http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputText.htm) or inputfield component.

<apex:inputtext value="{!Widget__c.Name}" style="text-transform:uppercase;" />

To add a CSS class instead, you can use the styleClass attribute. I believe this affects only the display of the text data, though. To make sure the value is uppercase when saved to the database, use this JavaScript on the onkeyup attribute (below).

<apex:inputtext value="{!Widget__c.Name}" style="text-transform:uppercase;" onkeyup="var u=this.value.toUpperCase();if(this.value!=u){this.value=u;}" />

---

Standard Page Layout

Option 1: Embedding a Visualforce Page in a Standard Page Layout

To do this on a Standard Page Layout, you could create a Visualforce Page for the field you would like this functionality on. This however will show up on View of the record only. It will not be visible on Edit.

The Visualforce Page would look like this (where Widget__c is replaced by the sObject you're working with):

<apex:page standardController="Widget__c">
    <apex:form id="WidgetForm">
        <apex:actionFunction name="SavePost" action="{!save}" rerender="WidgetPanel" status="str" />
        <apex:outputpanel id="WidgetPanel">
            <apex:inputtext id="WidgetName" value="{!Widget__c.Name}" style="text-transform:uppercase;" onkeyup="var u=this.value.toUpperCase();if(this.value!=u){this.value=u;}" />
            <apex:commandbutton value="Save" styleClass="btn" onclick="SavePost();" />
            <apex:actionStatus startText="Loading..." stopText="" id="str"> </apex:actionStatus>
        </apex:outputpanel>
    </apex:form>
</apex:page>

Then on the Page Layout, click the Visualforce Pages category underneath Fields and Buttons, and add your Visualforce page to your Page Layout by dragging the Visualforce Page component to the Layout. Be sure to configure the height of it by clicking the wrench in the top right of the new Visualforce Page component.

Option 2: Use JavaScript on a Standard Page Layout with a Sidebar Component

Another, more complicated, option for working with a Standard Page Layout would be to add a Home Page Component on the Sidebar that contains JavaScript. This option requires a fair understanding of JavaScript (or jQuery a JavaScript library). The JavaScript could then find the field, add the text-transform:uppercase; style to it, and bind a function to the keyup event to convert all inputted characters to uppercase (element.value.toUpperCase();). For more information on this method, check out Tehnrd's blog post on adding a sidebar component for JavaScript. He uses this method to show and hide buttons on Standard Page Layouts, but it could be modified to suit your purposes.