1
00:00:01.03 --> 00:00:02.06
- [Instructor] Hi, this is Chris Converse.

2
00:00:02.06 --> 00:00:04.06
In this episode we'll take
a look at creating styles

3
00:00:04.06 --> 00:00:07.06
for form elements when they're
in their focused state,

4
00:00:07.06 --> 00:00:10.04
meaning they're activated
and waiting for user input.

5
00:00:10.04 --> 00:00:12.05
This will allow you to
provide user feedback,

6
00:00:12.05 --> 00:00:15.04
while keeping your sites
color scheme more consistent.

7
00:00:15.04 --> 00:00:16.09
So if you'd like to follow along with me,

8
00:00:16.09 --> 00:00:18.08
download the exercise
files and let's begin

9
00:00:18.08 --> 00:00:22.09
by opening index.html in a text editor.

10
00:00:22.09 --> 00:00:25.03
Now with the HTML file open
you'll see, in the head area,

11
00:00:25.03 --> 00:00:27.01
we have a link to style that CSS,

12
00:00:27.01 --> 00:00:29.02
which we'll open in a moment.

13
00:00:29.02 --> 00:00:31.05
Inside of the body area we have a form,

14
00:00:31.05 --> 00:00:33.07
inside of the form we have an H1,

15
00:00:33.07 --> 00:00:35.06
and then I have each of the
input types for the form

16
00:00:35.06 --> 00:00:37.08
inside of div elements.

17
00:00:37.08 --> 00:00:39.06
And to preview the layout
we're going to be working with,

18
00:00:39.06 --> 00:00:43.01
you can open the index.html
file up in a browser.

19
00:00:43.01 --> 00:00:44.08
Now, inside of the browser,
if you come in here

20
00:00:44.08 --> 00:00:46.06
and click on a form field to activate it,

21
00:00:46.06 --> 00:00:48.09
you can start typing inside.

22
00:00:48.09 --> 00:00:51.08
Notice the highlight around
the outside and the borders.

23
00:00:51.08 --> 00:00:54.08
Every browser will render the
forms a little bit differently

24
00:00:54.08 --> 00:00:57.00
and show the focus a
little bit differently.

25
00:00:57.00 --> 00:00:59.03
So we're going to use CSS
to target the focus state

26
00:00:59.03 --> 00:01:02.07
of the form and colors so
they're more consistent.

27
00:01:02.07 --> 00:01:04.07
So I'll just delete my input here.

28
00:01:04.07 --> 00:01:07.01
Next, let's go back to the exercise files.

29
00:01:07.01 --> 00:01:08.09
Let's find style.css.

30
00:01:08.09 --> 00:01:12.08
Let's open this in out text editor.

31
00:01:12.08 --> 00:01:14.05
Let's scroll down a bit
and let's look for where

32
00:01:14.05 --> 00:01:17.03
we're targeting the input and text area

33
00:01:17.03 --> 00:01:19.00
inside of our form element.

34
00:01:19.00 --> 00:01:21.02
So it starts on line 42 here.

35
00:01:21.02 --> 00:01:23.00
And the comma here, it lets us define

36
00:01:23.00 --> 00:01:25.09
two selectors in the same role.

37
00:01:25.09 --> 00:01:27.06
So after background
color, let's come in here

38
00:01:27.06 --> 00:01:29.05
and set a new property at the outline,

39
00:01:29.05 --> 00:01:31.07
and we'll set this to 'none'.

40
00:01:31.07 --> 00:01:33.00
With this in place, let's hit save,

41
00:01:33.00 --> 00:01:35.04
let's go back to the browser,
and now when we click on

42
00:01:35.04 --> 00:01:38.01
the individual fields, to put
them in their focus state,

43
00:01:38.01 --> 00:01:41.01
we no longer see that blue
highlight around the outside.

44
00:01:41.01 --> 00:01:42.06
And again, you might see a
different color highlight

45
00:01:42.06 --> 00:01:44.05
depending on the browser you're using.

46
00:01:44.05 --> 00:01:46.00
But with the outline set to 'none',

47
00:01:46.00 --> 00:01:48.00
you shouldn't see anything.

48
00:01:48.00 --> 00:01:50.09
So now let's go back to the
CSS, after the outline property

49
00:01:50.09 --> 00:01:54.01
inside of the form input
and form text area.

50
00:01:54.01 --> 00:01:57.08
Let's hit another return,
and let's add a border.

51
00:01:57.08 --> 00:02:00.00
So we'll use shorthand style here.

52
00:02:00.00 --> 00:02:04.02
So border colon space,
one pixel for the size,

53
00:02:04.02 --> 00:02:09.07
'solid' for the style, and
let's use 'RGBA' for the color.

54
00:02:09.07 --> 00:02:12.01
put in our parentheses, then a semicolon.

55
00:02:12.01 --> 00:02:14.01
And I don't want to have
any color here, however,

56
00:02:14.01 --> 00:02:16.03
when we assign a color
for the focus state,

57
00:02:16.03 --> 00:02:17.08
I don't want the forms to move around

58
00:02:17.08 --> 00:02:19.04
because we've applied a border.

59
00:02:19.04 --> 00:02:22.03
Because a border takes one
pixel and will shift everything.

60
00:02:22.03 --> 00:02:25.03
So we're basically gonna put
an invisible border here.

61
00:02:25.03 --> 00:02:28.03
So I'll do 'zero' for red,
comma 'zero' for green,

62
00:02:28.03 --> 00:02:31.02
comma 'zero' for blue, then a comma

63
00:02:31.02 --> 00:02:33.01
and then a 'zero' for the alpha.

64
00:02:33.01 --> 00:02:34.02
So again, this will add a border

65
00:02:34.02 --> 00:02:36.07
that we won't be able to see.

66
00:02:36.07 --> 00:02:38.03
So with this in place, let's hit save,

67
00:02:38.03 --> 00:02:40.07
let's go back to the
browser, let's hit reload,

68
00:02:40.07 --> 00:02:43.03
and we'll now see that our
invisible border's being applied,

69
00:02:43.03 --> 00:02:46.08
so we just have gray fields here.

70
00:02:46.08 --> 00:02:48.04
And now we're ready to
create some CSS rules

71
00:02:48.04 --> 00:02:50.09
that will target the focus state.

72
00:02:50.09 --> 00:02:55.08
So let's go back to the CSS
file, let's create a new rule,

73
00:02:55.08 --> 00:03:00.09
we'll type 'form' space 'input', colon,

74
00:03:00.09 --> 00:03:05.01
'focus', put in our brackets,

75
00:03:05.01 --> 00:03:07.08
let's split this open.

76
00:03:07.08 --> 00:03:12.01
Let's come in here and
set a border dash color,

77
00:03:12.01 --> 00:03:14.00
and we'll set this to a gold color.

78
00:03:14.00 --> 00:03:18.06
So we'll use hexidecimal, so
'pound sign', 'f2' for red,

79
00:03:18.06 --> 00:03:24.08
'9f' for green, and 'two
seven' for blue, semicolon.

80
00:03:24.08 --> 00:03:27.09
Next property, let's come
in and set background color.

81
00:03:27.09 --> 00:03:29.09
So background dash color,
we're going to set this

82
00:03:29.09 --> 00:03:34.01
to a green, so that's 'pound
sign', 'four zero' for red,

83
00:03:34.01 --> 00:03:37.08
'four zero' for green,
and 'one five' for blue.

84
00:03:37.08 --> 00:03:39.06
So with these in place, let's hit save.

85
00:03:39.06 --> 00:03:40.07
Let's go back to the
browser, let's come in here

86
00:03:40.07 --> 00:03:42.06
and click on our fields.

87
00:03:42.06 --> 00:03:44.07
So now my username is in a selected state,

88
00:03:44.07 --> 00:03:47.05
we'll get a gold border
and a green background.

89
00:03:47.05 --> 00:03:50.00
Same thing for password.

90
00:03:50.00 --> 00:03:52.07
However, if I come down and
click inside the text area,

91
00:03:52.07 --> 00:03:54.09
you'll notice that the
color doesn't change.

92
00:03:54.09 --> 00:03:56.04
This is not an input field but rather

93
00:03:56.04 --> 00:03:59.04
a text area in the HTML.

94
00:03:59.04 --> 00:04:01.00
So I'll just reset my form.

95
00:04:01.00 --> 00:04:03.05
Let's go back to our CSS.

96
00:04:03.05 --> 00:04:06.03
Let's come in here and add
a second focus property.

97
00:04:06.03 --> 00:04:10.02
So after input colon
focus, let's hit a comma.

98
00:04:10.02 --> 00:04:12.06
We're going to put this on the next line.

99
00:04:12.06 --> 00:04:19.00
And let's type 'form' space
'text area', colon 'focus'.

100
00:04:19.00 --> 00:04:21.00
Save your file, let's
go back to the browser.

101
00:04:21.00 --> 00:04:22.07
And now when I click
inside of the text area

102
00:04:22.07 --> 00:04:24.09
and begin to type, we'll
see that the focus area

103
00:04:24.09 --> 00:04:28.05
is now being applied to
the text area as well.

104
00:04:28.05 --> 00:04:30.05
Now the last thing I'd like to do is style

105
00:04:30.05 --> 00:04:32.09
the submit button down here,
so that the hover state

106
00:04:32.09 --> 00:04:37.05
of the submit matches the
focus state of the fields.

107
00:04:37.05 --> 00:04:39.09
So again, let's go back to the CSS file.

108
00:04:39.09 --> 00:04:43.03
After 'text area' colon
'focus', let's hit a comma,

109
00:04:43.03 --> 00:04:46.02
let's hit a return.

110
00:04:46.02 --> 00:04:50.03
Let's type 'form' space 'input'.

111
00:04:50.03 --> 00:04:53.07
Then we're going to use the
attribute selector in CSS,

112
00:04:53.07 --> 00:04:56.09
so beginning and ending square bracket,

113
00:04:56.09 --> 00:05:02.00
inside we're going to set
type, 'equals', two quotes,

114
00:05:02.00 --> 00:05:05.05
submit, then after the attribute selector,

115
00:05:05.05 --> 00:05:09.08
we're going to hit a
colon, and type in 'hover'.

116
00:05:09.08 --> 00:05:11.05
With that in place,
let's hit save, let's go

117
00:05:11.05 --> 00:05:13.08
back to the browser one
more time, and if I hover

118
00:05:13.08 --> 00:05:16.03
over the submit button, we'll
see that we get a gold border

119
00:05:16.03 --> 00:05:19.05
and a green background,
which matches the focus state

120
00:05:19.05 --> 00:05:23.01
for the text area in the input fields.

121
00:05:23.01 --> 00:05:24.08
So with just a few CSS
properties, we're able

122
00:05:24.08 --> 00:05:27.04
to style the focus state of
form elements to better match

123
00:05:27.04 --> 00:05:30.01
the colors of our web design.

124
00:05:30.01 --> 00:05:32.02
Now if you'd like to
explore more styling options

125
00:05:32.02 --> 00:05:34.06
for form elements, take a
look at our course entitled

126
00:05:34.06 --> 00:05:37.03
'Styling Form Elements',
which is also available

127
00:05:37.03 --> 00:05:38.03
here in the library.

128
00:05:38.03 --> 00:05:40.01
And with that, I'll conclude this episode,

129
00:05:40.01 --> 00:05:43.00
and as always, thanks for watching.