WEBVTT

0
00:00.880 --> 00:04.960
Welcome back to yet another lecture on pseudo classes.

1
00:05.140 --> 00:09.710
And now I want to talk about styling enabled and disabled inputs.

2
00:09.730 --> 00:11.740
Firstly, what is an enabled element?

3
00:11.770 --> 00:14.190
It's just an element that can be activated.

4
00:14.200 --> 00:17.730
In other words, it can be selected, clicked on, typed into etc

5
00:17.740 --> 00:18.460
etc.

6
00:18.460 --> 00:21.880
And a disabled element is the complete opposite, right?

7
00:21.880 --> 00:25.180
It cannot be interacted with in any way.

8
00:25.180 --> 00:29.310
And even more than this, its data is not even sent to the server.

9
00:29.320 --> 00:35.500
But what's really, really cool with this is that these two states, enabled and disabled, they can

10
00:35.500 --> 00:40.570
be targeted using the :enabled and :disabled pseudo classes.

11
00:40.570 --> 00:43.660
And how does the :enabled pseudo class work?

12
00:43.660 --> 00:45.060
Well, it's very, very simple.

13
00:45.070 --> 00:50.680
Firstly, I just want to mention it is only associated with form elements, right, inputs, select elements

14
00:50.680 --> 00:56.320
and textarea elements. And enabled elements includes the ones, as I mentioned, you can select on, that

15
00:56.320 --> 01:00.710
you can enter data into, you can focus on or click into, etc etc.

16
01:00.710 --> 01:03.530
And how do you target it with CSS?

17
01:03.560 --> 01:08.960
Well, let's say a checkbox is checked and you want to target the label immediately after it.

18
01:08.960 --> 01:10.400
We can type it out like this.

19
01:10.400 --> 01:13.280
There's an example, pretty straightforward, right?

20
01:13.280 --> 01:14.420
Pretty intuitive.

21
01:14.420 --> 01:17.300
And I'm going to show you an example shortly.

22
01:17.300 --> 01:22.340
But before I do, let me just talk a little bit more about this disabled pseudo class.

23
01:22.580 --> 01:25.190
Why would this ever be useful?

24
01:25.190 --> 01:31.760
Well, sometimes if some data does not apply to certain user, you might not want to submit that data

25
01:31.760 --> 01:33.170
when they submit the form.

26
01:33.170 --> 01:33.740
What?

27
01:33.770 --> 01:34.730
Isn't that weird?

28
01:34.730 --> 01:39.080
Well, a classic example is an address form. 

29
01:39.080 --> 01:43.760
Commonly you'll be asked if you want to use the same address for billing and shipping.

30
01:43.760 --> 01:47.990
Let's say the user has the same shipping address as the billing address.

31
01:48.020 --> 01:51.530
Well, in that case, there's no point sending duplicate information to a server.

32
01:51.560 --> 01:55.640
You may as well only send one address, and disable the other.

33
01:55.670 --> 01:56.900
Is that making sense?

34
01:57.080 --> 01:58.220
If not, don't worry.

35
01:58.220 --> 02:04.340
Let me actually hop over now to Visual Studio Code and let me show you an example of using the enabled

36
02:04.340 --> 02:09.950
and disabled CSS selectors, because pictures speak a thousand words.