From 3ace60c93b008d791fcb38d5378813f9f5f38a66 Mon Sep 17 00:00:00 2001
From: Ingrid Budau <twigle_ingrid@yahoo.com>
Date: Tue, 30 Nov 2021 12:15:17 +0100
Subject: 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
---
 qutebrowser/html/settings.html | 8 ++++----
 1 file 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;
 }
-- 
cgit v1.2.3-54-g00ecf