As I hinted to in the previous installment of this series; a radio button is in the same situation as checkboxes on the web: no options for styling...
For further actions, you may consider blocking this person and/or reporting abuse
when you hide the input using
display: none;, you remove it from screen readers and keyboard users too. A better approach would be to use absolute positioning (on a positioned parent) and give it an opacity of 0. You should also try to give it the same dimensions as your new styled radio so that it correlates correctly when blind people are using touch discovery on a mobile device.I'd change to input like this:
input {
top: 0;
left: 0;
width: 100%;
cursor: inherit;
height: 100%;
margin: 0;
opacity: 0;
padding: 0;
z-index: 1;
position: absolute;
}