Removing the blue box on radio and checkmark inputs.

Question

The blue box on radio options dont look very good and they are rather a mess. I tried applying 2 Css methods from popular sources , and even combined them both together, still no output.
Here is one of the links:
https://stackoverflow.com/questions/36605956/how-do-i-remove-the-blue-outline-from-a-radio-box-when-focused
Stack Overflow

Here is my code
input[type="radio"]:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;}

Please tell me if I did anything wrong, or if there is another solution.

Answer 1

Nevermind I found the solution, thanks anyways.
I added -webkit-tap-highlight-color:transparent;
property to the radio and checkmark to the classes gender, age, pay and interests .

Answer 2

Here:
https://code.sololearn.com/WoZ5zK2T86np/?ref=app
HTML line 108
CSS line 208