diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
index 24410bae0d7..31879d3fb09 100644
--- a/packages/@ourworldindata/components/src/Checkbox.scss
+++ b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -40,6 +40,7 @@
         svg {
             font-size: 10px;
             padding-left: 0.75px;
+            display: none;
         }
     }
 
@@ -56,8 +57,9 @@
         border-color: $active-fill;
     }
 
-    input:checked:active + .custom {
-        background: white;
+    input:active + .custom svg,
+    input:checked + .custom svg {
+        display: block;
     }
 
     .label {
diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
index d3af557fded..c8c52b2c0ca 100644
--- a/packages/@ourworldindata/components/src/Checkbox.tsx
+++ b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -19,7 +19,7 @@ export class Checkbox extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="custom">
-                        {checked && <FontAwesomeIcon icon={faCheck} />}
+                        <FontAwesomeIcon icon={faCheck} />
                     </div>
                     <div className="label">{label}</div>
                 </label>
diff --git a/packages/@ourworldindata/components/src/RadioButton.scss b/packages/@ourworldindata/components/src/RadioButton.scss
index d52007b6d97..dd5b1bc685b 100644
--- a/packages/@ourworldindata/components/src/RadioButton.scss
+++ b/packages/@ourworldindata/components/src/RadioButton.scss
@@ -41,6 +41,7 @@
             height: math.div($radio-size, 2);
             background-color: $active-fill;
             border-radius: 50%;
+            display: none;
         }
     }
 
@@ -48,6 +49,11 @@
         outline: 2px solid $controls-color;
     }
 
+    input:active + .outer .inner,
+    input:checked + .outer .inner {
+        display: block;
+    }
+
     .label {
         @include grapher_label-2-regular;
         padding-left: $radio-size + 8px;
diff --git a/packages/@ourworldindata/components/src/RadioButton.tsx b/packages/@ourworldindata/components/src/RadioButton.tsx
index 638559ae470..1c9dfdf807b 100644
--- a/packages/@ourworldindata/components/src/RadioButton.tsx
+++ b/packages/@ourworldindata/components/src/RadioButton.tsx
@@ -19,7 +19,7 @@ export class RadioButton extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="outer">
-                        {checked && <div className="inner" />}
+                        <div className="inner" />
                     </div>
                     <div className="label">{label}</div>
                 </label>