How to hide buttons from apex:detail component?

Background: While working on an app, I came across this scenario I was using <apex:detail  /> component in a Visualforce Page.

Issue: My concern was to remove all those visible button which come alongwith this component usage.

                                                  Initial snapshot

So here is a way to hide those button using CSS:

Solution:

<style type="text/css">

      

        input.btn[name="clone"] {

            display: none;

        }

        input.btn[name="edit"] {

            display: none;

        }

        input.btn[name="del"] {

            display: none;

        }

      

</style>

                                                      After snapshot

Point to be noted: Use "Inspect Element" to find the correct names of the buttons and then use them accordingly in the [name="buttonName"] inside the CSS.

If the name of the buttons change, you have to update them in CSS.

Happy Apex Coding..