Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 A Few Words on Styling HTML Forms

Welcome to the first lesson of this course. In the introduction I mentioned that some form elements are very easy to style, while others are difficult, but I didn’t explain why that’s the case. Let’s cover that right now.

Related Links

2.1 A Few Words on Styling HTML Forms

Welcome to the first lesson of this course. Now in the introduction, I mentioned that some form elements are really easy to style while others are notoriously difficult. But I didn't explain why that's the case, so I'm gonna do that right now. The answer is pretty simple, form controls were first added to HTML in 1995 in the HTML 2 specification. CSS, on the other hand, was released a year later in 1996. So during this year with no CSS for styling, browsers were relying on the operating system to render these form elements. Now you might think that after CSS was out, then all of a sudden all the form widgets were styleable, no, not a chance. Because people were already used to how those form elements looked like based on their operating system, browser vendors were reluctant to make these form widgets styleable. So, obviously it's a different story today where all the browsers are constantly improving CSS support for these elements, but back then that was a different story. Now another reason for the lack of CSS support is the complex structure on some of these form controls. In order for a form widget to be styleable, CSS needs access to its entire Shadow DOM structure, and currently that's not yet fully implemented. Today, if you want to style one of these exotic form controls, like a date picker, you would have to either rely on JavaScript or build a custom one from the ground up and use that one. If you're interested in techniques for doing that, check out the lesson notes where I've included some relevant links. Now, which form controls can be easily styled? Well, actually most of them, as you can see from this list, we're pretty lucky. There is great CSS support for styling fieldsets, labels, outputs, all the text fields, including textareas, buttons, and the form element itself. On the next level of difficulty, we can find checkboxes, radio buttons, and the legend element. These can definitely be styled, but they require some more advanced CSS in order to get the job done. Finally, the elements that are very hard, if not impossible, to style are color pickers, date controls, range controls, progress, meter, file pickers, and all the drop-down widgets, like select option and data list. So as you can see, there are still a lot of form controls that we simply cannot style right now. We will, someday, but just not right now. The good news is they're not very commonly used. I mean, when was the last time you used the meter control in a form? I never used that, and I bet a lot of people don't either. So until we get to that point where these form controls will be, a must have, it's not that big of a deal that we can't style them properly just yet. From the list that I just showed you, the select element is probably the most common one, the most used one. And we do have a separate lesson on how to work with that, so stay tuned. Now Mozilla, God bless them, have put together a property compatibility table for form widgets, and that's exactly what it is. It's a table where you can find the property compatibility for all the form widgets that we have today. So let me quickly show you that. I've included a link to that in the lesson notes. And basically, this is the table right here. Here we can find the property, so width, height, border, margin, padding, color, font, and so on. You have all the properties here, and this particular table is for text fields. And here you can find support, N stands for normal and T stands for tweaked. And tweaked refer to this property right here which we'll discuss in the next lesson. So basically on text fields, this is how you read this, does width work? Yes, it does, both on normal mode and on tweaked mode. Does height work? Yes, on tweaked mode and partially on normal mode. And partially, you can see these notes here. And you have these properties for buttons as well, numbers, check boxes, radio buttons. You can see just how little support we have for styling check boxes and radio buttons. No, no, no, no, no, no, no, we can apply margins to them. Color, font, letter spacing, these that say NA basically means not applicable. And what else do we have here? Data list, this is actually the worst because nothing can be styled with it. File pickers are kind of hit and miss. Date pickers, they're a little bit better then data lists, but still really, really bad support. And the list can go on and on. So, definitely check out this handy resource from Mozilla before you decide you want to style some form widgets because you might have big surprises. You'll find that the more exotic ones cannot be styled. All right, so with this little introduction out of the way, let's move on and start learning about some techniques that will help us lay the foundation for a much easier styling process in the future. And we'll begin in the next lesson with the appearance property. See you there.

Back to the top