How to show red asterisk symbol in place of red vertical bar for all inputFileds in visaulforce page

Basically whenever using Standard controller in a visual force page showing vertical red mark before all mandatory filed using <apex:inputFiled> is very easy because we can simply use required="true" attribute.Whenever user click on any action button on page it will check for all the mandatory field values and if any one or more filed value is not filled it will shown an error below each field like Error: You must enter a value.

Now my requirement here is I want to show red asterisk symbol in place of red vertical bar for all inputFileds in visaulforce page and I want to retain all the features of <apex:inputFiled> like checking for mandatory fields and displaying an error message as Error: You must enter a value.So in this post i'm going to show how to show red asterisk symbol in place of vertical bar.

Write a sample visual force to show vertical red bar

 <apex:page standardController="Account">  
  <apex:form >  
  <apex:pageBlock >  
   <apex:pageBlockSection title="Account Information" collapsible="true">  
    <apex:inputField value="{!account.name}" required="true"/>  
    <apex:inputField value="{!account.type}" required="true"/>  
    <apex:inputField value="{!account.Industry}" required="true"/>  
    <apex:inputField value="{!account.rating}" required="true"/>  
   </apex:pageBlockSection>  
   <apex:pageBlockSection title="Address" collapsible="true">  
    <apex:inputField value="{!account.Billingcity}" required="true"/>  
    <apex:inputField value="{!account.BillingState}" required="true"/>  
    <apex:inputField value="{!account.BillingCountry}" required="true"/>  
    <apex:inputField value="{!account.BillingPostalCode}" required="true"/>  
   </apex:pageBlockSection>  
   <apex:pageblockButtons ><apex:commandButton value="Save" action="{!save}"/></apex:pageblockButtons>  
  </apex:pageBlock>  
  </apex:form>  
 </apex:page>  

When you run the above page it will displays all input fields with vertical red var as shown below

If you haven't filled any one mandatory fields and click on save it will throws error below the field

Workaround to show red asterisk symbol in place of red vertical bar for all inputFileds

Just we need to add below 2 lines of style snippet in visual force page to show red asterisk

 <style>  
    .bPageBlock .requiredInput .requiredBlock{background-color: #F6FBF6;}  
    .requiredInput .requiredBlock::before { display: block; content: "*"; font-size: 1.5em; font-weight: bold; color: #c00; margin-left: -4px; margin-top: -2px; } 
 </style>  

Complete visual force after adding the above style snippet is looks like below

 <apex:page standardController="Account">  
  <apex:form >  
  <apex:pageBlock >  
   <apex:pageBlockSection title="Account Information" collapsible="true">  
    <apex:inputField value="{!account.name}" required="true"/>  
    <apex:inputField value="{!account.type}" required="true"/>  
    <apex:inputField value="{!account.Industry}" required="true"/>  
    <apex:inputField value="{!account.rating}" required="true"/>  
   </apex:pageBlockSection>  
   <apex:pageBlockSection title="Address" collapsible="true">  
    <apex:inputField value="{!account.Billingcity}" required="true"/>  
    <apex:inputField value="{!account.BillingState}" required="true"/>  
    <apex:inputField value="{!account.BillingCountry}" required="true"/>  
    <apex:inputField value="{!account.BillingPostalCode}" required="true"/>  
   </apex:pageBlockSection>  
   <apex:pageblockButtons ><apex:commandButton value="Save" action="{!save}"/></apex:pageblockButtons>  
  </apex:pageBlock>  
  <style>  
    .bPageBlock .requiredInput .requiredBlock{background-color: #F6FBF6;}  
    .requiredInput .requiredBlock::before { display: block; content: "*"; font-size: 1.5em; font-weight: bold; color: #c00; margin-left: -4px; margin-top: -2px; }  
  </style>  
  </apex:form>  
 </apex:page>  

When you preview this page you will be seeing red asterisk symbol in place of red vertical bar in visual force page for all inputFileds.

Output:

When you click on save button without filling required fields marked as red asterisk it will throughs an error like Error: You must enter a value below each missing field.

Thanks for visiting..Enjoy......!