Let's talk about styling forms in a little bit more detail.
The first thing I want to mention is that to style form controls that are easy to style, remember those
good ones?
You shouldn't face much difficulties at all, since they mostly behave like any other HTML element.
And as well as some basic CSS tools, we can also access several selectors, UI pseudo classes, that enable
styling based on the current state of the UI. And we've already seen many examples of using these pseudo
classes in the course already. And there are few kind of important points I just want to make.
Firstly, I want to look at fonts and text when it comes to styling our form widgets.
The first thing I want to say about it, is that the CSS font and text features can be used easily with
most form widgets. And to make your form appearance consistent, you can use this CSS rule.
You can actually target the font-family and font-size, and when you set it to `inherit`, what it does
is that all the child elements will inherit the font family from their parent, and this will make most
form widgets consistent with your overall theme of your site.
But my dear students, browser behavior is often inconsistent.
And what I mean by this is that by default, some widgets will not inherit font-family and font-size
from their parents ðŸ˜–.
So just bear that in mind.
So that's fonts and text.
The other very important CSS property we need to discuss is box sizing.
Because this can make or break the styling of your form, it really is good to know.
So what is this box sizing all about?
Well, firstly when it comes to fonts and texts, they have support for every property related to the
CSS box model.
And what do I mean when I say that all text fields have complete support for every property related
to the CSS box model?
Well, I just mean all of these text fields allow us to manipulate the width, height, padding, margin,
and border properties.
And remember, every browser relies on their system default styling when displaying widgets, so it's
up to you to define how you wish to blend them into your content.
If you want to keep the native look and feel of the widgets, you'll face difficulty if you want to
give them a consistent size.
And this is because each widget has their own rules for border padding and margin.
So if each widget has their own rules, what do we do to make it consistent?
Well, it's actually surprisingly easy. To give the same size to different widgets,
we can just target the `box-sizing` property.
(what?)
Whaaaat?
Well, don't stress, don't stress.
You know me.
I love looking at examples.
So why don't we hop over to the text editor and let me show you how it works in action?
I mean, you can see here, just a snapshot,
we target the box-sizing property and we set its value to border-box.
Let me show you what that does.
Very quickly I want to show you how this box-sizing property works.
So let's just create a very simple HTML page.
We're going to have a style section, because I want to use this box-styling property.
But for now let's just create our form widgets, and see the default styling that's applied.
The first form widget I want to create is an input with type text.
We save this, refresh the browser and there we go.
We don't need an ID and name.
We can actually just put a placeholder. "box
sizing is cool."
There we go.
Pretty straightforward.
All right, let's put a break and then let's now create another input, this time with its type attribute
set to date. Input date.
Save this.
And there we go.
You can already see the browsers applying different styling, different widths to different types of
form controls.
Again, we don't need name and ID.
Let's have another break. This time,
let's try, you know, a select element.
How about that?
We will even move away from the input element
entirely ðŸ˜². I know, I know, I'm daring, I'm daring.
So there we go.
Here's another default sizing applied by the browser.
Um, why don't we try `textarea`? Break,
let's try textarea.
Uh, we don't need a name, ID, columns or rows.
We'll just have the default. Wnd we can say "box sizing is cool."
Save this.
And there we go.
Yet another width applied to another form control.
Okay, Clyde, these are just elements.
But what about buttons?
Well, let's do an input.
Oh, well, firstly, let me do a break.
Let's do an input of type submit.
And we can have the value being submit.
Save that. There's a button ... yet another width. And we can even try yet another button, this time the
actual button element of type `submit`.
Give it the value of submit.
And there we go.
All right, let's expand this.
You can see we've got different form controls, all with their own styling applied by the browser.
But ... this is where the benefit of box-sizing comes in
my dear students. You know what,
let me actually have this side by side because you're going to see a massive transformation now.
And let's target absolutely everything - all our inputs, all our select elements, all of our textarea
elements, and of course our buttons.
Now this is where the magic happens, because if we access the CSS box-sizing property and we set it
to content-box,
nothing seems to happen.
But actually, let me prove it to you.
Let's say we want our form to be uniform.
We want all our widgets to be the same width.
So let's set a width of, I don't know, 150 pixels.
We can see that because it's the content box.
It's only literally the content that's 150 pixels.
The browser then still applies the default padding and borders to it.
So that's why we can see different widths on all of our widgets
even though we've tried to say we want it all at 150 pixels! The most easiest solution is to not have
content-box, we can have
that's right, border-box.
And if we hit save, look how cool that is.
It's all aligned.
And we can even, you know, affect padding.
Um, and we know that the width will always be the same.
This is the benefit with border-box.
But let's say you have to use content-box.
How would you make the widths the same.
Well remember that the content-box doesn't include padding and borders.
So let's remove the padding and let's put our own border of 1 pixel solid black.
The same border then will apply to every single widget.
And if we hit save, now we've got the same width for every single widget.
But it's kind of cumbersome.
And quite frankly, sometimes you want padding and you want to keep the content-box dynamic.
So yeah, often you don't want the content-box.
We want the border-box.
Very simple, very quick example.
Let's jump back to the lecture.
(music)