Take control of all form elements

Screenshots

Here are two screenshots. To the left is a Mac Kirby Panel. To the right is a PC Kirby panel. They look different because the unstyled default checkboxes are used.

I think it can be good to style them so that they will look the same on all devices and OS.

Here is why:

If icons would be equal across OS/devices…

  • I don’t reveal my OS when I send screenshots of my panel.
  • It will fit more to the Kirby Panel style.
  • Input text and textarea elements are styled. I think it makes sense to style the other as well.
  • We don’t let chance determine the look. Let the crew be in control of the design.

@distantnative have styled his checkboxes in a Kirby Panel like way. Maybe not do it exactly like that but it shows what I mean:

What do you think?

1 Like

Hey Jens, thanks for your proposal, I actually like the idea. I will make a proposal to the team, but please understand that this might not be the highest priority on our list. :wink:

Just the note about OS obfuscation: If a screenshot contains any type, it will tell a skilled eye on which OS you are, as fonts render much different on Windows, than — for instance — on OS X. And on Linux, iOS or Android, fonts will also be rendered differently.

Cheers
Fabian

1 Like

Hint:
The best solution to avoid such situations, I know, is to use the newest version of https://github.com/necolas/normalize.css

Good luck!

Normalize.css does not cover this, as it does not define styles for checkboxes. It only normalizes their behavior in terms of sizing. In order to create custom checkboxes, you have to use more advanced CSS or JavaScript. In modern browsers, AFAIK this can be done in pure CSS. Normalize CSS also does not bring font rendering across different operating system in line with each other (that is not possible without implementing your completely own font rendering engine). Nevertheless, Normalize CSS is a great tool when starting a new project. I often use it as a starting point for my base styles, as it takes a lot of browser oddities into consideration, that oneself might not know about.

1 Like

There are two possible outcomes:

  1. You code it quickly enough. You probably created big accessibility issues (and never tested for that), you probably made it less usable at least for a fraction of users, and there are going to be bugs in some browsers and platforms you didn’t test.

  2. You spend a lot of time not so much coding it but testing it in many browsers, platforms, on many devices, and with screen readers (on both desktop and mobile operating systems). The effort is very big compared to the theoretical gains you were aiming for.

I think it’s completely acceptable if there are differences in look/style on different platforms. Some form fields are tricky when it comes to styling them, so I agree with @fvsch, it might not be worth the effort.

1 Like

@fabianmichael

this might not be the highest priority on our list.

I totally agree. :slight_smile: There are more important things to take care of first.

@fvsch

You probably created big accessibility issues

I’m not so sure about that. In the solutions I’ve looked at the checkboxes and the labels are still there. It’s just a matter of using an own pseudo elements to show the state of the checkbox.

there are going to be bugs in some browsers and platforms you didn’t test.

Most of the browsers has great support for pseudo elements (:checked for example):

If you look into it, it’s not really rocket sience:

It even falls back to the default on failure.

testing it in many browsers, platforms, on many devices, and with screen readers

If there really are a reason to test everything on every browser/device/os, then this is a nice tool for it:

The effort is very big

In not sure about that.

compared to the theoretical gains you were aiming for

Theoretical gains? How rude! :wink:

@texnixe

I think it’s completely acceptable if there are differences in look/style on different platforms.

I agree. It’s totally acceptable, but I always aim at perfection down to the pixel. I think this is a minor thing, but I still think it’s a thing. :slight_smile:

Some form fields are tricky when it comes to styling them

In this case it’s just hide and replace with an own pseudo element. I don’t think there is a “native” way of styling them. But it’s great to still keep the real checkboxes around to keep the form functions attached to it.

it might not be worth the effort.

Maybe not today… but tomorrow (in tha future), right? :stuck_out_tongue:

In conclusion

I still don’t want to say no to this, but I fully agree that we should push it to the future.

When I did my internship semester in an web agency the designers really liked to custom style checkboxes and all kind of that stuff… I just can remember that it caused all kind of troubles and wired behavior across the board (especially when you need to consider smartphone devices).

Knowing your OS because of a screenshot is maybe a bit paranoid? They could just search your name, come here and find enough information about your development in this forum and then start social engineering based on that :smiley:

2 Likes

@Andi-Lo

Ahh, finally a real case (and just not some theoretical problems). :slight_smile:

It seems like I got most people against me on this now and 2016 is clearly not the year of doing this. I’ll get back to you on this in about 10 years. Maybe there will be a native way to styling checkboxes at that point of time.