[SalesForce] Remove Salesforce styling only from buttons in VF page

I've added a button to my visualforce page, and have added the bootstrap class btn success to it.

<button type="button" class="btn btn-success">Success</button>

However, Salesforce adds styling to buttons which results in the button being styled incorrectly, I can override this behaviour by putting standardStylesheets="false" in the <apex:page> tag, but this is much too extreme and would require lots of fiddling to fix the rest of my page.

Is there a way I can remove just the styling Salesforce provide for the buttons, via CSS?

Best Answer

Borrowed from this question, you can fork the Bootstrap source, then modify the bootstrap.less file to include an outer scope:

#bootstrap-scope {
    // All remaining code here
}

Run make in order to rebuild the CSS, upload that as your static resource, and finally, scope your page's content with a wrapper:

<div id="bootstrap-scope">
    <!-- more code here -->
    <button class="btn btn-success">Success</button>
</div>

Because of the specificity rules of CSS, any button inside the bootstrap-scope element should match the Bootstrap CSS instead of the salesforce CSS.

Related Topic