How to scale HTA checkboxes and radio buttons to match screen scaling

When screen scaling is changed to 125%, 150% or a custom value, the following HTA scales accordingly, except for checkboxes and radio buttons. How can I make those elements also scale proportionally with the user's screen scaling setting?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<script language="VBScript">
x = screen.availWidth * 1/3 'use one third of the available width
y = screen.availHeight * 3/4 'use three quarters of the available height
Window.ResizeTo x, y
Window.MoveTo (screen.availWidth - x)/2, (screen.availHeight - y)/2 'Center
</script>
<style>
  body  {background-color:LemonChiffon; font-family:Segoe UI; font-size:11pt}
</style>
</head>
<body>
  <h1>Heading 1</h1> Body text
  <h2>Heading 2</h2> Body text
  <h3>Heading 3</h3> Body text<br><br>
  <input type=button value="Button"><br>
  <input type=checkbox id=cb1>Check box<br>
  <input type=radio id=rb1 name=test><input type=radio id=rb2 name=test>Radio buttons<br>
</body>

Solution

In HTAs, checkboxes and radio buttons can be scaled using the zoom property. Read the current AppliedDPI value from the registry, convert that to a scale value and apply it to all check box and radio button elements. The scaled elements are kept aligned with the text by applying the vertical-align:bottom style. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<script language="VBScript">
Const HKCU = &H80000001
Set oWSH = CreateObject("Wscript.Shell")
Set oReg = GetObject("winmgmts:\\.\root\default:StdRegProv")

x = screen.availWidth * 1/3 'use one third of the available width
y = screen.availHeight * 3/4 'use three quarters of the available height
Window.ResizeTo x, y
Window.MoveTo (screen.availWidth - x)/2, (screen.availHeight - y)/2 'Center

Scale = GetScale()

Sub window_onload
  'Scale checkboxes and radio buttons 
  cb1.style.zoom = Scale
  RadioGroup1(0).style.zoom = Scale
  RadioGroup1(1).style.zoom = Scale
End Sub

Function GetScale()
  GetScale = 1.0
  On Error Resume Next
  'If user changes scale, they must logout/login for this registry value to change
  GetScale = oWSH.RegRead("HKCU\Control Panel\Desktop\WindowMetrics\AppliedDPI") / 96
  On Error Goto 0
End Function

</script>

<style>
  body  {background-color:LemonChiffon; font-family:Segoe UI; font-size:11pt}
  .scaled {vertical-align:bottom}
</style>
</head>

<body>
  <h1>Heading 1</h1> Body text
  <h2>Heading 2</h2> Body text
  <h3>Heading 3</h3> Body text<br><br>
  <input type=button value="Button"><br>
  <input type=checkbox class=scaled id=cb1>Check box<br>
  <input type=radio class=scaled name=RadioGroup1>
  <input type=radio class=scaled name=RadioGroup1>Radio buttons<br>
</body>