In this post, we’ll explain how to Hide Save button from SharePoint Ribbon in SharePoint 2013 and 2016 using CSS or JavaScript.
![Hide Save button from SharePoint Ribbon Hide Save button from SharePoint Ribbon](https://mohamedelkassas.files.wordpress.com/2016/08/hide-save-button-ribbon-in-sharepoint-list.gif?resize=541%2C299)
You might also like to read Show / Hide fields based on choice field selection using JQuery in SharePoint 2016
In some scenarios, you may need to hide the SAVE button in the SharePoint list ribbon
![Hide Save button from SharePoint Ribbon Hide save option in SharePoint List Ribbon](https://mohamedelkassas.files.wordpress.com/2016/08/hide-save-option-at-ribbon-in-sharepoint-list.gif?resize=550%2C315)
To be like this
![Hide Save button from SharePoint Ribbon Hide save Button in SharePoint list ribbon](https://mohamedelkassas.files.wordpress.com/2016/08/hide-save-button-ribbon-in-sharepoint-list.gif?resize=541%2C299)
In this section, we’ll show how to Hide Save button from SharePoint Ribbon for a specific SharePoint List using CSS and Javascript.
Steps
First, you should Disable the SharePoint list forms to be not showing as dialog by doing the following:
- List Settings.
![Hide Save button from SharePoint Ribbon SharePoint List Settings](https://mohamedelkassas.files.wordpress.com/2016/08/list-settings.gif?resize=512%2C311)
- In General Settings, Click on “Advanced Settings”.
![Hide Save button from SharePoint Ribbon List Settings - advanced settings](https://mohamedelkassas.files.wordpress.com/2016/08/list-settings-advanced-settings.gif?resize=317%2C400)
- Scroll down until you find the “Dialogs” section.
- At “Lunch forms in a dialog?”, Select NO.
![Hide Save button from SharePoint Ribbon Launch forms in dialog](https://mohamedelkassas.files.wordpress.com/2016/08/launch-forms-in-dialog.gif?resize=467%2C218)
- Go back to the SharePoint List.
- Click on the new item button to open the new form.
- Pick up the Ribbon button ID using the developer tools by clicking on F12.
- Select the button at the above ribbon that you would like to hide.
- In our case, we would like to Hide SAVE button from SharePoint Ribbon.
- Double click on SAVE Button ID to mark the code.
- Then do Right Click and Select “Copy” to copy the SAVE Button ID.
![Hide Save button from SharePoint Ribbon Copy ID from F12 Dom Explorer](https://mohamedelkassas.files.wordpress.com/2016/08/copy-id-from-f12-dom-explorer.gif?resize=436%2C212)
- Again from the above ribbon, Click on “Form Web Parts”.
- Select “Default New Form” to edit the default New Form page.
![Hide Save button from SharePoint Ribbon Edi default new form page](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/07/Edit-Default-New-Form-in-SharePoint.png?resize=585%2C169&ssl=1)
- Click on “Add web Part”.
- From Media and Content > Add Script Editor.
![Hide Save button from SharePoint Ribbon Add Script Editor Web Part](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/07/Add-Script-Editor-in-SharePoint-2019.png?resize=672%2C813&ssl=1)
- Edit Snippet.
![Hide Save button from SharePoint Ribbon Edit Snippet](https://mohamedelkassas.files.wordpress.com/2016/08/edit-snippet.gif?resize=548%2C342)
If the Edit Snippet is missing, please check Missing EDIT SNIPPET SharePoint Script Editor
Add the below code in Script Editor Web part to Hide Save button from SharePoint Ribbon.
<style>
#Ribbon\.ListForm\.Edit\.Commit\.Publish-Large
{ display:none !important; }
</style>
![Hide Save button from SharePoint Ribbon Hide Button ribbon in sharepoint list using CSS](https://mohamedelkassas.files.wordpress.com/2016/08/hide-button-ribbon-in-sharepoint-list-via-css.gif?resize=553%2C330)
Alternatively, you can also use the below JavaScript code to Hide Save button from SharePoint Ribbon
document.getElementById("Ribbon.ListForm.Edit.Commit.Publish-Large").style.display="none";
![Hide Save button from SharePoint Ribbon Hide Save button from SharePoint Ribbon Using JS](https://mohamedelkassas.files.wordpress.com/2016/08/hide-button-ribbon-in-sharepoint-list-via-javascript.gif?resize=551%2C331)
As we earlier mentioned, the previous steps can be applied to a specific list, and If you would like to Hide Save button from SharePoint Ribbon all lists in a specific SharePoint site, you should follow the below mentioned steps:
Steps
- Make sure that you have a full control access on the site.
- Create a CSS file with the above CSS.
- Upload it to the Site Assets or Style library of the site,
- Go to Site Settings > Master Page > Alternate CSS URL.
![Hide Save button from SharePoint Ribbon Master Page - look and feel](https://mohamedelkassas.files.wordpress.com/2016/08/master-page-look-and-feel.gif?resize=295%2C239)
- Check the third option > Click Browse and select the CSS file that has been uploaded earlier in the Site Assets library.
![Hide Save button from SharePoint Ribbon Alternate CSS URL](https://mohamedelkassas.files.wordpress.com/2016/08/alternate-css-url.gif?resize=531%2C171)
The above steps has been applied for a Publishing site, in case you are using Team site, so you should edit your default Master Page using SharePoint Designer.
- Click OK.
Note: In case, you would like to Hide Save button from SharePoint Ribbon for All Lists within the site collection, so you should follow the above-mentioned steps but at the root site, and for sure you will need to be a site collection administrator.
Conclusion
In conclusion, we have learned how to Hide a SharePoint Ribbon button using CSS and Javascript for
- Specific List.
- All lists in a specific site.
- All sites in a specific site collection.
Applies To
- SharePoint 2016.
- SharePoint 2013.
You might also like to read
- SharePoint Script Editor only works in Edit Mode.
- Disable Choice Field On Edit Form in SharePoint 2016.
- SharePoint Disable Rich Text Field On Edit Form.
Have a Question?
If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.