XFA - Use native radio and checkbox buttons

- Remove current stuff which relies on some system fonts to avoid bad rendering.

web/xfa_layer_builder.css

@@ -125,38 +125,6 @@
   resize: none;
 }
 
-.xfaLabel > input[type="radio"] {
-  /* Use this trick to make the checkbox invisible but
-       but still focusable. */
-  position: absolute;
-  left: -99999px;
-}
-
-.xfaLabel > input[type="radio"]:focus + .xfaCheckboxMark {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
-}
-
-.xfaCheckboxMark {
-  cursor: pointer;
-  flex: 0 0 auto;
-  border-style: solid;
-  border-width: 2px;
-  border-color: #8f8f9d;
-  font-size: 10px;
-  line-height: 10px;
-  width: 10px;
-  height: 10px;
-  text-align: center;
-  vertical-align: middle;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.xfaCheckbox:checked + .xfaCheckboxMark::after {
-  content: attr(mark);
-}
-
 .xfaButton {
   cursor: pointer;
   width: 100%;
@@ -169,6 +137,13 @@
   background: Highlight;
 }
 
+.xfaCheckbox,
+.xfaRadio {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
 .xfaRich {
   white-space: pre-wrap;
 }

web/xfa_layer_builder.js

@@ -82,6 +82,7 @@ class XfaLayerBuilder {
       xfa: this.xfaHtml,
       page: null,
       annotationStorage: this.annotationStorage,
+      intent,
     };
 
     // Create an xfa layer div and render the form