function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Tre PedigoTre Pedigo 

Styling a single input field within a pageBlockSection in my VF page

Hello all,
I have a section of my visualforce page that displays all of the individual services our company provides (there's about 30 of them). I have set up process automation so that these fields are automatically edited upon selection of a "Service Level" field. My requirement is that I need to have the "service level" field and each of the individual fields in the same section. But, what I also need to do is apply styling to the "service level" field so that it stands out to my team. Ideally this would involve making the font of the field larger/bold and centering the field as well. I think its also important to mention that this is a picklist field. My code is as follows:

<apex:page standardController="opportunity" lightningStylesheets="false" tabstyle="account">

    <apex:form >
   
        <apex:pageBlock title="Implementation-Required Opportunity Fields"  >
        <style>
            body .bPageBlock .pbBody .blue .pbSubheader{
                background-color:#007add;
            
                          }
            body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .red .pbSubheader h3{
                color:+005fb2;
            }
            .One
             {
            margin:40px;
            padding:40px;
            width:150px;
            height:200px;
            background-color:blue;
            border-radius:40px;
            border:10px solod red;
            font-size:40px;
             }
        </style>
        <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
                <apex:commandButton action="{!quicksave}" value="Quick Save"/>
        </apex:pageBlockButtons>
        <apex:outputPanel styleClass="blue" layout="block">   
            
             <apex:pageBlockSection title="General Information" columns="2"   >             
                <apex:inputField value="{!opportunity.account.name}"/>                              
                <apex:inputField value="{!Opportunity.name}"/>
                <apex:inputField value="{!opportunity.owner.name}" label="Sales Person"/> 
                <apex:inputField value="{!Opportunity.Sales_Engineer__c}"/>
                <apex:inputField value="{!Opportunity.Director_of_Implementation__c}"/>
                <apex:inputField value="{!Opportunity.Customer_Success_Manager__c}"/>                         
                <apex:inputField value="{!Opportunity.CloseDate}"/>                   
                <apex:inputField value="{!Opportunity.Desired_Go_Live_Date__c}"/>                
                <apex:inputField value="{!Opportunity.Customer_Success_Demo__c}"/>  
                <apex:inputField value="{!Opportunity.Total_Square_Footage__c}" style="width: 100px"/>
                <apex:inputField value="{!Opportunity.TCV__c}"/>
                <apex:inputField value="{!Opportunity.Vertical_Market__c}"/>
                <apex:inputField value="{!Opportunity.Pipeline_Type__c}"/>  
             </apex:pageBlockSection>
                  
             <apex:pageBlockSection title="Address">
                <apex:outputtext value="{!Opportunity.account.billingstreet}"/>
                <apex:outputtext value="{!Opportunity.account.billingcity}"/>
                <apex:outputtext value="{!Opportunity.account.billingstate}"/>
                <apex:outputtext value="{!Opportunity.account.billingcountry}"/> 
             </apex:pageBlockSection>    
            
               
                
              
             <apex:pageBlockSection title="Project Detail">  
                <apex:inputField value="{!Opportunity.description}" style="width: 900px; height: 100px" label="Project Detail"/>                        
             </apex:pageBlockSection> 
             <apex:pageBlockSection title="SE Notes and Use Cases">  
                <apex:inputField value="{!Opportunity.SE_Notes__c}" style="width: 900px; height: 100px" label="SE Notes and Use Cases"/>                              
                                                                                                                            
             </apex:pageBlockSection>
       
        <apex:pageBlockSection title="Services" columns="1" >
          <apex:pageBlocksectionItem datatitle="Service Level" >
            <apex:inputField value="{!Opportunity.Service_Level__c}"/>  
          </apex:pageBlocksectionItem>
            <apex:inputField value="{!Opportunity.Remote_Training_Implementation__c}"  />
            <apex:inputField value="{!Opportunity.Gap_Analysis_and_Milestone_Reporting__c}"/>
            <apex:inputField value="{!Opportunity.Use_of_technology_or_Recommended_Best_Pr__c}"/>
            <apex:inputField value="{!Opportunity.X2D_Arch_Floor_Plans__c}"/>
            <apex:inputField value="{!Opportunity.Key_Plans__c}"/>
            <apex:inputField value="{!Opportunity.Mechanical__c}"/>
            <apex:inputField value="{!Opportunity.Electrical__c}"/>
            <apex:inputField value="{!Opportunity.Plumbing__c}"/>
            <apex:inputField value="{!Opportunity.Room_List__c}"/>
            <apex:inputField value="{!Opportunity.Work_Order_Management_System_Configurati__c}"/>
            <apex:inputField value="{!Opportunity.Critical_Asset_Management_Template_Onl__c}"/>
            <apex:inputField value="{!Opportunity.Finishes_Template_Only__c}"/>
            <apex:inputField value="{!Opportunity.O_M_Spec_Sheets_Curated__c}"/>
            <apex:inputField value="{!Opportunity.Inventory_Management_Template_Only__c}"/>
            <apex:inputField value="{!Opportunity.Vendor_Management_Template_Only__c}"/>
            <apex:inputField value="{!Opportunity.Preventative_Maintenance_Schedules__c}"/>
            <apex:inputField value="{!Opportunity.Hot_Spotting_Assets_only__c}"/>
            <apex:inputField value="{!Opportunity.Hot_Spotting_Room_only__c}"/>
            <apex:inputField value="{!Opportunity.Rooftop_Area__c}"/>
            <apex:inputField value="{!Opportunity.QR_Codes_Mail__c}"/>
            <apex:inputField value="{!Opportunity.QR_Codes_Placement__c}"/>
            <apex:inputField value="{!Opportunity.On_site_Training_Implementation__c}"/>
            <apex:inputField value="{!Opportunity.Interior_Walls_Multivista__c}"/>
            <apex:inputField value="{!Opportunity.Panoramic_Pictures__c}"/>
            <apex:inputField value="{!Opportunity.Asset_Specific_Floor_Plans_Up_to_3__c}"/>
            <apex:inputField value="{!Opportunity.Fire__c}"/>
            <apex:inputField value="{!Opportunity.Furniture__c}"/>
            <apex:inputField value="{!Opportunity.Kitchen_Equipment__c}"/>
            <apex:inputField value="{!Opportunity.Audio_Visual_IT__c}"/>
            <apex:inputField value="{!Opportunity.Security__c}"/>
            <apex:inputField value="{!Opportunity.Outside_Areas_Exception_Rooftop_Areas__c}"/>
            <apex:inputField value="{!Opportunity.Floorplan_Asset_Isolation_Extraction__c}"/>
            <apex:inputField value="{!Opportunity.Users_and_Groups_configuration__c}"/>
          
        
        
        
        
        
        </apex:pageBlockSection>
        </apex:outputPanel>
      </apex:pageBlock>
    </apex:form>
    
    
     <!--<apex:pageBlockSection title="Contacts">
                <!--<apex:inputField value="{!Opportunity.Contact__c}" label="Contact 1"/>
                <apex:inputField value="{!Opportunity.Contact2__c}" label="Contact 2"/>
                <apex:inputField value="{!Opportunity.Contact3__c}" label="Contact 3"/>  -->
            
                <apex:relatedList list="OpportunityContactRoles"/ >

           <!-- </apex:pageBlockSection>  -->
</apex:page>

I bolded the specific line of code that I need to style. Any help would be greatly appreciated!
Raj VakatiRaj Vakati
try like this
 
<apex:pageBlocksectionItem datatitle="Service Level"  styleClass="slds-form-element">

OR
Go to Brower console and get the style class for apex:pageBlocksectionItem  and add the above style to same class like below 
body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .red .pbSubheader h3{
                color:+005fb2;
            }

 
Tre PedigoTre Pedigo

Raj, 
Thank you for the response, I am working with your solution ideas now. I would also like to note that this inputfield does not have to be in a pageblocksectionitem. That was just an idea I was trying at the time. 

Tre PedigoTre Pedigo
Also Raj, in your reply is that the correct placement of <b>
Raj VakatiRaj Vakati
No .. please remove that b ..i just added for highlight 
Tre PedigoTre Pedigo
Raj, 
Thank you, but I'm not very familar with slds-form format. I'm looking more for a way to make this input field the header, or just to give it some simple styling that will distinguish it from the rest of the data in the pageBlockSection.
Raj VakatiRaj Vakati
Can you use standard HTML tags insted of the pageBlockSection .. becuase its not supporting the css for entire section