Hi Fabian,
I was able to (partially) fix your issues by adding the following code. Unfortunately it will not be exactly the same as on other browsers, as IE11 doesn’t support :before & :after on input elements.
Checkbox (theme/styles/web/sass/core/widgets/checkbox.scss):
input[type='checkbox']::-ms-check {
color: $form-input-border-color;
border-color: $form-input-border-color;
border-radius: $form-input-border-radius;
background-color: $form-input-bg;
}
input[type='checkbox']:focus::-ms-check,
input[type='checkbox']:checked::-ms-check {
color: $form-input-border-focus-color;
border-color: $form-input-border-focus-color;
background-color: $form-input-bg-focus;
}
Radio Buttons (theme/styles/web/sass/core/widgets/radiobuttons.scss):
input[type='radio']::-ms-check {
color: $form-input-border-color;
border-color: $form-input-border-color;
background-color: $form-input-bg;
}
input[type='radio']:focus::-ms-check,
input[type='radio']:checked::-ms-check {
color: $form-input-border-focus-color;
border-color: $form-input-border-focus-color;
background-color: $form-input-bg-focus;
}
Don’t forget to compile your SCSS to CSS after adding the code. You can use Calypso for that. :)
An alternative to the fixes above is to comment out the following from theme/styles/web/sass/main.scss.
@import 'core/widgets/checkbox'; @import 'core/widgets/radiobuttons';
This will exclude the styling from Atlas. But then you would have even more differences as these inputs look different on every browser.
are you sure its Atlas and not IE?
this is a screen shot from chrome, edge and FF from radio button default styling.
from: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio
if atlas is doing something with radio buttons, you could just remove that bit from atlas, radio buttons are always different depending on your browser and OS, so would make sense to leave that to the browser to make it look native to what ever system you are using them on. (unless you want to do something crazy)