How to change required symbol color in Visualforce Page

For getting the above requirement Copy paste the below code in your visualforce page

<apex:page standardController="Account"> 

    <style>

    .requiredBlock {

        background-color: green !important;

    }

    </style>

    <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:pageblockButtons >

                    <apex:commandButton value="Save" action="{!save}"/>
<apex:pageblockButtons> 

        </apex:pageBlock> 

    </apex:form> 

 </apex:page>

In above code you will find a CSS with class "requiredBlock" which you will find when you right click the visualforce page and click on Inspect Element like below.

In above image you will find a div tag with class as requiredBlock which is acting for displaying required symbol so you need to use this class in your customized CSS inorder to override perdefined color(RED).

Final Output:

Note : The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.