# Signature Soft Pad Customization > The signature soft pad is designed to capture signatures from users to electronically sign documents. This article explains how you can customize the CSS and some of the other options. - **Author:** Bjoern Meyer - **Published:** 2023-11-20 - **Modified:** 2026-07-17 - **Description:** The signature soft pad is designed to capture signatures from users to electronically sign documents. This article explains how you can customize the CSS and some of the other options. - **2 min read** (326 words) - **Tags:** - ASP.NET - Document Viewer - ASP.NET Core - **Web URL:** https://www.textcontrol.com/blog/2023/11/20/signature-soft-pad-customization/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/11/20/signature-soft-pad-customization/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/11/20/signature-soft-pad-customization/llms-full.txt --- The signature soft pad is designed to capture signatures from users to electronically sign documents. It provides a way to draw the representation of the signature or to upload it. ### Shadow DOM The Document Viewer is implemented as a [Web Component](https://www.webcomponents.org/introduction) with an encapsulated shadow DOM. This way, you can't access the DOM directly, and your CSS classes won't affect the style of the Document Viewer and modals like the signature soft pad. To change the CSS and the DOM of the viewer, you need to manipulate the shadow DOM, which can be done using JavaScript. In this example, we are going to remove the *Upload* link button, change the label style, and change the background color of the signature area. ![Signature Soft Pad](https://s1-www.textcontrol.com/assets/dist/blog/2023/11/20/a/assets/modal.webp "Signature Soft Pad") ### Adding CSS The following JavaScript code is used to access the shadow DOM and to add rules to it. ``` window.addEventListener("documentViewerLoaded", function () { document.querySelector("tx-document-viewer").shadowRoot.styleSheets[0].addRule("#tx-signature-setup a[data-id='tx_signaturemodal_upload']", "display: none !important"); document.querySelector("tx-document-viewer").shadowRoot.styleSheets[0].addRule("#tx-signature-setup label", "text-decoration: none; font-weight: 600"); document.querySelector("tx-document-viewer").shadowRoot.styleSheets[0].addRule("#tx-signature-setup .softpad", "background: repeating-radial-gradient(circle,gray,gray 5px,#c2c2c2 5px,#c2c2c2 10px)"); } ``` After running this code, the dialog will be customized as shown below. ![Signature Soft Pad](https://s1-www.textcontrol.com/assets/dist/blog/2023/11/20/a/assets/modal2.webp "Signature Soft Pad") ### Clearing the Signature Pad Another common task is to clear the signature pad. By default, the signature pad always opens with a previously created signature that is stored locally. The following JavaScript command can be used to remove the signature. ``` TXDocumentViewer.signatures.clearSignaturePad(); ``` This can be done at various times, such as when loading the viewer or when loading a document. The following code shows how to remove the signature when creating the viewer. ``` window.addEventListener("documentViewerLoaded", function () { TXDocumentViewer.signatures.clearSignaturePad(); }); ``` --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt) - [Optimizing Digital Signature Workflows: Starting with MS Word DOCX Files Instead of PDFs in C#](https://www.textcontrol.com/blog/2024/09/27/optimizing-digital-signature-workflows-starting-with-ms-word-docx-files-instead-of-pdfs-in-csharp/llms.txt) - [Document Viewer: Setting the Rendering Mode](https://www.textcontrol.com/blog/2024/08/22/document-viewer-setting-the-rendering-mode/llms.txt) - [View MS Word DOCX and PDF Documents using a .NET C# Document Viewer for ASP.NET Core and ASP.NET](https://www.textcontrol.com/blog/2024/08/08/view-ms-word-docx-and-pdf-documents-using-a-net-csharp-document-viewer-for-aspnet-core-and-aspnet/llms.txt) - [Getting Started Video Tutorial: How to Add Electronic and Digital Signatures to PDF Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-add-electronic-and-digital-signatures-to-pdf-documents-in-asp-net-core-csharp/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-asp-net-core-csharp/llms.txt) - [Transforming Financial Documents into Smart and Secure Forms in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/05/01/transforming-financial-documents-into-smart-and-secure-forms-in-asp-net-core-c-sharp/llms.txt) - [Document Viewer: Long Polling Support for Loading Documents](https://www.textcontrol.com/blog/2024/04/25/document-viewer-long-polling-support-for-loading-documents/llms.txt) - [Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/04/19/adding-and-sharing-annotations-across-document-types-using-the-document-viewer-in-asp-net-core-c-sharp/llms.txt) - [Adding a Security Middleware to ASP.NET Core Web Applications to Protect TX Text Control Document Editor and Document Viewer Endpoints](https://www.textcontrol.com/blog/2024/03/18/adding-a-security-middleware-to-asp-net-core-web-applications-to-protect-tx-text-control-document-editor-and-document-viewer-endpoints/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Securing the Signature Endpoint with Custom ActionFilterAttributes](https://www.textcontrol.com/blog/2023/07/25/securing-the-signature-endpoint-with-custom-actionfilterattributes/llms.txt) - [Common Web API Methods for Handling E-Signature Workflows in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/07/20/common-web-api-methods-for-handling-esignature-workflows-in-aspnet-core-csharp/llms.txt) - [Use PDF.js to Render PDF Documents within the Document Viewer](https://www.textcontrol.com/blog/2023/03/18/use-pdfjs-to-render-pdf-documents-within-the-document-viewer/llms.txt) - [Document Viewer 31.2.2 RC1 Released with New Features](https://www.textcontrol.com/blog/2023/03/17/document-viewer-3122-rc1-released-with-new-features/llms.txt) - [Feature Announcement: Enabling External PDF Renderer PDF.js in TX Text Control DocumentViewer](https://www.textcontrol.com/blog/2023/01/20/documentviewer-enabling-external-pdf-renderer-pdfjs/llms.txt) - [Document Viewer: SignatureSettings Explained](https://www.textcontrol.com/blog/2022/09/16/document-viewer-signaturesettings-explained/llms.txt) - [Getting Started: Document Viewer with ASP.NET Core](https://www.textcontrol.com/blog/2022/09/01/getting-started-document-viewer-with-aspnet-core/llms.txt)