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.

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%; }