Welcome back to yet another lecture on pseudo classes.
And now I want to talk about styling enabled and disabled inputs.
Firstly, what is an enabled element?
It's just an element that can be activated.
In other words, it can be selected, clicked on, typed into etc
etc.
And a disabled element is the complete opposite, right?
It cannot be interacted with in any way.
And even more than this, its data is not even sent to the server.
But what's really, really cool with this is that these two states, enabled and disabled, they can
be targeted using the :enabled and :disabled pseudo classes.
And how does the :enabled pseudo class work?
Well, it's very, very simple.
Firstly, I just want to mention it is only associated with form elements, right, inputs, select elements
and textarea elements. And enabled elements includes the ones, as I mentioned, you can select on, that
you can enter data into, you can focus on or click into, etc etc.
And how do you target it with CSS?
Well, let's say a checkbox is checked and you want to target the label immediately after it.
We can type it out like this.
There's an example, pretty straightforward, right?
Pretty intuitive.
And I'm going to show you an example shortly.
But before I do, let me just talk a little bit more about this disabled pseudo class.
Why would this ever be useful?
Well, sometimes if some data does not apply to certain user, you might not want to submit that data
when they submit the form.
What?
Isn't that weird?
Well, a classic example is an address form.
Commonly you'll be asked if you want to use the same address for billing and shipping.
Let's say the user has the same shipping address as the billing address.
Well, in that case, there's no point sending duplicate information to a server.
You may as well only send one address, and disable the other.
Is that making sense?
If not, don't worry.
Let me actually hop over now to Visual Studio Code and let me show you an example of using the enabled
and disabled CSS selectors, because pictures speak a thousand words.