+ Start a Discussion
John BraunJohn Braun 

Visualforce - Field label font size

Hello all,
I was wondering if someone could help me with controlling the font size of field labels in visualforce. Please see the below example of a picklist field I have in Visualforce, I'd like to increase the font size of the label. In my example below, I would be interested in increasing the font size of the label:

"1. How important was it to choose a vendor that could take your product through development to commercialization?"

Any help/direction is greatly appreciated, thank you!:

<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1"
                label="1.  How important was it to choose a vendor that could take your product through development to commercialization?">
         <apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
         <apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
         <apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
         <apex:selectOption itemValue="Average" itemLabel="3-Average"/>
         <apex:selectOption itemValue="High" itemLabel="4-High"/>
         <apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
         <apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
      </apex:selectList>
Ravikant kediaRavikant kedia
You can use inline or external style sheet here Like in your visualforce tag style="font-size: 30px;" include then  youe font size become large.
John BraunJohn Braun
Hi Ravikant,

Thank you for the response -
Would you mind showing me where i would place "font-size: 30px;" within the code example I posted? The objective is to make the label of the picklist larger, not the selectable options, thanks!
Ravikant kediaRavikant kedia
If it not solve your problem then use:
< apex:outputlabel value="How important was it to choose a vendor that could take your product through development to commercialization?"  style="font-size: 30px;">  and then your selectlist like:

<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1" >
John BraunJohn Braun
Kavikant,

Thank you very much for your help, I believe I'm getting somewhere. A problem now seems to be that my selectable options are no longer uniform now that I've made the update to the code.

In the example below I've updated 2 of the questions in my survey with the suggestion you provided above. I left the other questions alone for comparison. Is there a way to still ensure the selectable option values line up the same?

Result:

User-added image

See my code below - I'm providing the modified version based on Kavikant's suggestion, along with examples of unmodified fields:

<apex:pageBlockSection title="Questions" columns="2">
     
 
      <apex:outputlabel value="1. How important was it to choose a vendor that could take your product through development to commercialization?"  style="font-size: 13px;">
        <apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1"
                label="1.  How important was it to choose a vendor that could take your product through development to commercialization?">
         <apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
         <apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
         <apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
         <apex:selectOption itemValue="Average" itemLabel="3-Average"/>
         <apex:selectOption itemValue="High" itemLabel="4-High"/>
         <apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
         <apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
      </apex:selectList>
      </apex:outputlabel>
     
      <apex:outputlabel value="7.  How large a factor was facility location in making your final decision?"  style="font-size: 13px;">
        <apex:selectList value="{!Customer_Survey__c.Question_7__c}" multiselect="false" size="1"
                label="7.  How large a factor was facility location in making your final decision?">
         <apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
         <apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
         <apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
         <apex:selectOption itemValue="Average" itemLabel="3-Average"/>
         <apex:selectOption itemValue="High" itemLabel="4-High"/>
         <apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
         <apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
      </apex:selectList>
      </apex:outputlabel>
     
    <apex:selectList value="{!Customer_Survey__c.Question_2__c}" multiselect="false" size="1"
                label="2.  Please rate how your prior experience working with Patheon in the past was an important factor in your decision, if applicable?">
         <apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
         <apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
         <apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
         <apex:selectOption itemValue="Average" itemLabel="3-Average"/>
         <apex:selectOption itemValue="High" itemLabel="4-High"/>
         <apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
         <apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
      </apex:selectList>
     
     
      <apex:selectList value="{!Customer_Survey__c.Question_8__c}" multiselect="false" size="1"
                label="8.  How important was the site qualification/technical visit in your vendor selection?">
         <apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
         <apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
         <apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
         <apex:selectOption itemValue="Average" itemLabel="3-Average"/>
         <apex:selectOption itemValue="High" itemLabel="4-High"/>
         <apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
         <apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
      </apex:selectList>
Ravikant kediaRavikant kedia
John Braun i am Ravikant not kavikant and now i am solving your problem right click on your select list option and using inspect element find the class for select option and like your class name is - classname then put <style> .classname { font-size:13px;" }  </style>  in your code and be aware classname is a imaginery class name put here related class name for your select option.
John BraunJohn Braun
Ravikant, please accept my apologies I mistyped!!!

As for your suggestion, I did the following -
I'm not sure what to pull out to reference.

Again thank you so much for your help!!

User-added image
Ravikant kediaRavikant kedia
Hi John Braun , 
                            You and set style according to me as style="font-size: 11px", please select best answer if it solve your problem.