Weird looking radio buttons in Safari Mobile

[masylum]

I think this is because of:

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

and

input {
  border-radius: 0;
}

Should we add :not([type=checkbox]):not([type=radio]) to those?

[filipelinhares]

Hey @masylum, thanks for your report.

Adding :not([type=checkbox]):not([type=radio]) we increase specificity in our selector to 0 2 1 instead of just 0 0 1. This way if someone try to style using just the input selector he won't be able to do that.

I think instead of add what we don't want to style, we can add just what we want to style:

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"] {
  border-radius: 0;
}

What do you think?

[masylum]

we actually had to revert that change because of the increased specificity as you mention. We ended up leaving ress as it is and then overwrite those types with inherit for those specific cases.

[filipelinhares]

@masylum can you paste a snippet of how are you using inherit. I'm trying to figure out how to solve this weird looking.

[masylum]

We add a class. Probably it could work also with input[type=xxx] too.

.radio {
    border-radius: inherit;
    background-color: inherit;
    border-style: inherit;
}

.checkbox {
    background-color: inherit;
    border-style: inherit;
}

[filipelinhares]

I tried to use your approach but it didn't work.

The best way I've found to solve this is specifying what kind of input we want to reset with those properties.

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
button,
select,
textarea {
  background-color: transparent;
  border-radius: 0;
  border-style: none;
  color: inherit;
}

The "problem" here is if anyone want to style those properties using the input selector. Is necessary to use a class or other selector with specificity greater or equal than 0 1 0 to overwrite the [type="xxx"].