Salesforce | Show red asterisk symbol in place of red vertical bar

Problem : How to show red asterisk symbol in place of red vertical bar for all required inputFields in Visualforce page?

Solution : Sometimes we have some mandatory fields in our form, for this we can simply use required=”true” attribute with . This will show a vertical red mark before all mandatory fields. Whenever user clicks on any action button on page, it will check for all the mandatory field values and if any one or more field value is not filled, it will show an error below each field like

Error: You must enter a value.

Coding for make required field :

<apex:inputField value="{!account.name}" required="true"/>
<apex:inputField value="{!account.type}" required="true"/>

Now our requirement here was that we wanted to show red asterisk symbol in place of red vertical bar for all inputFileds in Visaulforce page and retain all the features of like checking for mandatory fields and displaying an error message as Error : You must enter a value.

For doing this we have to put two lines of style snippet in Visualforce page to show red asterisk.

<apex:page standardController="Account">
<apex:form>
<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: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:pageblockButtons ><apex:commandButton value="Save" action="{!save}"/></apex:pageblockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Salesforce customization, App development or any other software development assistance please contact us at salesforce@webners.com