Hide radio button using CSS `appearance` property

- Hide radio button using the property `-webkit-appearance: none;`
  instead of `opacity`
- It is also supported on older QtWebEngine version 5.12

1 files changed, 4 insertions, 4 deletions

diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html
index e89cd6437..dfbc5c168 100644
--- a/qutebrowser/html/settings.html
+++ b/qutebrowser/html/settings.html
@@ -59,12 +59,12 @@ input:focus {
     border: 2px solid #7a589ea6;
 }
 
-/* Hides the radio button */
 input[type="radio"] {
-    position: absolute;
-    opacity: 1%;
+    position: absolute; /* Positions the radio button relative to the edges of its containing element */
+    -webkit-appearance: none; /* Removes its native styling */
     width: min-content;
     margin: 0;
+    border: none;
 }
 
 label {
@@ -111,7 +111,7 @@ input[type="radio"]:checked + label {
 }
 
 .radio-button {
-    position: relative;
+    position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */
     display: inline-flex;
     margin: 3px 1px;
 }