Custom appearance (the default setting)

The Custom appearance rendering type for checkboxes and radio buttons is similar to the Web type with some improvements such as support for background colors and border styles. While not an exact match, it is close to styles defined in a PDF. This is the default setting.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer = new DsPdfViewer("#viewer", { fieldsAppearance: { radioButton: "Custom", checkBoxButton: "Custom" } }); viewer.addDefaultPanels(); viewer.toolbarLayout.viewer = { "default": ["$navigation", "$zoom"], "mobile": ["$navigation", "$zoom"] }; viewer.zoomMode = 1; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/buttons-appearance.pdf"); }
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer = new DsPdfViewer("#viewer", { fieldsAppearance: { radioButton: "Custom", checkBoxButton: "Custom" } }); viewer.addDefaultPanels(); viewer.toolbarLayout.viewer = { "default": ["$navigation", "$zoom"], "mobile": ["$navigation", "$zoom"] }; viewer.zoomMode = 1; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/buttons-appearance.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>View PDF</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }