1
00:00:02.00 --> 00:00:03.04
- [Chris] Hi, this Chris Converse

2
00:00:03.04 --> 00:00:05.02
and in this episode we'll
convert the appearance

3
00:00:05.02 --> 00:00:07.02
of checkboxes into switches,

4
00:00:07.02 --> 00:00:09.03
which gives your users
a more visual indication

5
00:00:09.03 --> 00:00:11.03
of the options they're selecting.

6
00:00:11.03 --> 00:00:12.07
Now if you'd like to
following along with me

7
00:00:12.07 --> 00:00:14.01
download the Exercise Files

8
00:00:14.01 --> 00:00:19.03
and let's begin by opening
index.html in a text editor.

9
00:00:19.03 --> 00:00:20.09
And once you have the HTML file open

10
00:00:20.09 --> 00:00:22.06
you'll see up in the head area

11
00:00:22.06 --> 00:00:24.09
we have a link to a style.css file,

12
00:00:24.09 --> 00:00:26.06
which we'll be opening in a moment.

13
00:00:26.06 --> 00:00:30.02
Inside of the body area
we have a form element.

14
00:00:30.02 --> 00:00:32.03
Inside of the form element we have an h1,

15
00:00:32.03 --> 00:00:35.00
and then we have three label elements,

16
00:00:35.00 --> 00:00:36.03
one, two, and three.

17
00:00:36.03 --> 00:00:39.00
Inside of each label element
we have an input field,

18
00:00:39.00 --> 00:00:40.05
which is the checkbox,

19
00:00:40.05 --> 00:00:43.02
and some text here,
which acts as the label.

20
00:00:43.02 --> 00:00:44.08
Now the reason we have
these inside of a label

21
00:00:44.08 --> 00:00:46.06
is so that if I come over to the browser

22
00:00:46.06 --> 00:00:49.04
and click on anything inside of the label

23
00:00:49.04 --> 00:00:53.06
this will activate the checkbox.

24
00:00:53.06 --> 00:00:54.09
And when you load the page you'll notice

25
00:00:54.09 --> 00:00:56.09
the Notification checkbox is already on.

26
00:00:56.09 --> 00:00:58.04
That's because I've added this attribute

27
00:00:58.04 --> 00:01:00.03
down here in the HTML.

28
00:01:00.03 --> 00:01:02.09
This way we can see the
selected and unselected states

29
00:01:02.09 --> 00:01:05.03
when we're working in the CSS.

30
00:01:05.03 --> 00:01:06.09
Now before we begin working in the CSS

31
00:01:06.09 --> 00:01:09.00
we're going to need to
add some additional HTML

32
00:01:09.00 --> 00:01:10.07
into each one of the label elements,

33
00:01:10.07 --> 00:01:13.09
so that we have something to
create our switches out of.

34
00:01:13.09 --> 00:01:15.09
So inside of the first label element

35
00:01:15.09 --> 00:01:18.03
after the input field let's hit a Return

36
00:01:18.03 --> 00:01:20.00
and let's add a div element.

37
00:01:20.00 --> 00:01:24.04
So <div and the tag

38
00:01:24.04 --> 00:01:27.07
and then let's end the element.

39
00:01:27.07 --> 00:01:30.04
Now we'll select it,

40
00:01:30.04 --> 00:01:31.09
let's come down to the second label,

41
00:01:31.09 --> 00:01:36.02
let's hit a Return after
the input, paste our div,

42
00:01:36.02 --> 00:01:39.01
and then down to the third
one, and do the same thing.

43
00:01:39.01 --> 00:01:41.02
So now we have a div element inside

44
00:01:41.02 --> 00:01:42.09
of each of the label elements

45
00:01:42.09 --> 00:01:47.03
that appears immediately
after the input elements.

46
00:01:47.03 --> 00:01:49.01
And so now with these
div elements in place

47
00:01:49.01 --> 00:01:50.05
let's save our HTML,

48
00:01:50.05 --> 00:01:52.01
let's go back to the Exercise Files,

49
00:01:52.01 --> 00:01:57.05
and let's open up style.css
in our text editor.

50
00:01:57.05 --> 00:02:00.02
So now in our CSS file let's
scroll down to the bottom.

51
00:02:00.02 --> 00:02:04.07
After the label selector let's
create a rule that targets

52
00:02:04.07 --> 00:02:08.00
the div elements inside
of the label element.

53
00:02:08.00 --> 00:02:12.06
So we'll start with label space div,

54
00:02:12.06 --> 00:02:15.06
then another space, put in our brackets,

55
00:02:15.06 --> 00:02:17.04
let's come in here and
define some properties

56
00:02:17.04 --> 00:02:18.09
for that div element.

57
00:02:18.09 --> 00:02:21.00
And we'll start with the display type.

58
00:02:21.00 --> 00:02:24.05
We're going to set this
to an inline-block.

59
00:02:24.05 --> 00:02:26.07
Next line we're going
to set a width property,

60
00:02:26.07 --> 00:02:30.08
we're going to set this to 45 pixels wide.

61
00:02:30.08 --> 00:02:37.02
Next we'll set the height to 24 pixels.

62
00:02:37.02 --> 00:02:39.03
Next we're going to set
a position property,

63
00:02:39.03 --> 00:02:42.01
we're going to set this to absolute.

64
00:02:42.01 --> 00:02:44.02
Then on the next line we're
going to set a top property

65
00:02:44.02 --> 00:02:47.04
to negative 1 pixels.

66
00:02:47.04 --> 00:02:49.02
Next we'll set a left property,

67
00:02:49.02 --> 00:02:51.08
we'll set this to 0.

68
00:02:51.08 --> 00:02:54.00
Then we're going to set a border radius,

69
00:02:54.00 --> 00:03:00.03
so border-radius, we're going
to set this to 16 pixels.

70
00:03:00.03 --> 00:03:02.03
Then we're going to set a border property.

71
00:03:02.03 --> 00:03:05.03
So we'll type border: space,

72
00:03:05.03 --> 00:03:06.09
first property's going to be the size,

73
00:03:06.09 --> 00:03:09.04
we'll set this to 2 pixels.

74
00:03:09.04 --> 00:03:11.03
For the style we'll set solid,

75
00:03:11.03 --> 00:03:13.07
then a space, then for the color

76
00:03:13.07 --> 00:03:15.06
we'll use the rgba colorspace,

77
00:03:15.06 --> 00:03:18.04
so rgba, put in our parentheses,

78
00:03:18.04 --> 00:03:23.00
then inside of the parentheses
255 for red, 255 for green,

79
00:03:23.00 --> 00:03:25.07
255 for blue, which will give us white,

80
00:03:25.07 --> 00:03:28.04
and then .6 for the alpha.

81
00:03:28.04 --> 00:03:31.00
And then finally I'll want the
background color to animate,

82
00:03:31.00 --> 00:03:33.06
so we're going to use
the transition property.

83
00:03:33.06 --> 00:03:38.01
So we'll type transition: space,

84
00:03:38.01 --> 00:03:41.08
background-color, then a space,

85
00:03:41.08 --> 00:03:47.05
we're going to put .3s
for .3 seconds, then a ;.

86
00:03:47.05 --> 00:03:49.04
So now with these CSS properties in place

87
00:03:49.04 --> 00:03:51.09
save your CSS file, go
back to the browser,

88
00:03:51.09 --> 00:03:55.02
hit reload, and you'll now
see these rounded corner ovals

89
00:03:55.02 --> 00:03:56.09
that we've created that are now positioned

90
00:03:56.09 --> 00:04:00.02
to the left side of each label element.

91
00:04:00.02 --> 00:04:01.06
So now we'll use a pseudo-element

92
00:04:01.06 --> 00:04:05.07
to add the indicator dot
inside of these div elements.

93
00:04:05.07 --> 00:04:08.02
So in the CSS let's scroll down,

94
00:04:08.02 --> 00:04:13.01
let's create another
rule, label space div,

95
00:04:13.01 --> 00:04:17.08
then :: then the word after,

96
00:04:17.08 --> 00:04:22.01
put in our brackets, split this open.

97
00:04:22.01 --> 00:04:24.04
First we'll start with a content property,

98
00:04:24.04 --> 00:04:28.06
we'll set this to null,
so just '' and a ;.

99
00:04:28.06 --> 00:04:30.09
Next we're going to set the display type,

100
00:04:30.09 --> 00:04:33.07
we'll set this to a block.

101
00:04:33.07 --> 00:04:37.02
Next we'll set a position
property of absolute.

102
00:04:37.02 --> 00:04:41.02
Then a top property of 4 pixels,

103
00:04:41.02 --> 00:04:46.04
a left property of 5 pixels,

104
00:04:46.04 --> 00:04:51.04
then we'll set a width of 16 pixels,

105
00:04:51.04 --> 00:04:53.03
then we'll set a height of 16 pixels,

106
00:04:53.03 --> 00:04:55.02
giving us a perfect square.

107
00:04:55.02 --> 00:04:56.08
And then to turn this into a circle

108
00:04:56.08 --> 00:05:01.07
we'll set a border-radius of 50%.

109
00:05:01.07 --> 00:05:03.02
And then the final two properties will be

110
00:05:03.02 --> 00:05:06.02
the background color and
the transition property.

111
00:05:06.02 --> 00:05:09.06
So on the next line we'll
set background-color.

112
00:05:09.06 --> 00:05:12.03
We're going to use rgba here as well,

113
00:05:12.03 --> 00:05:15.04
so put in rgba and the parentheses.

114
00:05:15.04 --> 00:05:18.07
Inside we're going to
set this to a 60% white,

115
00:05:18.07 --> 00:05:21.09
so 255 for red, 255 for green,

116
00:05:21.09 --> 00:05:26.00
255 for blue, then .6 for the alpha.

117
00:05:26.00 --> 00:05:28.07
And then finally the transition property.

118
00:05:28.07 --> 00:05:32.01
We're going to transition the
position of this indicator.

119
00:05:32.01 --> 00:05:34.08
So we're going to set transition: space,

120
00:05:34.08 --> 00:05:38.07
left, then a space, a
we'll set it to .3 seconds.

121
00:05:38.07 --> 00:05:40.05
So it transitions with
the same amount of time

122
00:05:40.05 --> 00:05:43.09
that we transition the
background color up here.

123
00:05:43.09 --> 00:05:46.01
So with these in place save your CSS.

124
00:05:46.01 --> 00:05:47.07
If we go back to the browser we'll now see

125
00:05:47.07 --> 00:05:49.09
that the indicator is
now inside of the ovals

126
00:05:49.09 --> 00:05:53.03
for each one of the elements.

127
00:05:53.03 --> 00:05:55.04
And so now we need to move our indicator

128
00:05:55.04 --> 00:05:58.03
based on whether or not the
checkbox is in a checked state.

129
00:05:58.03 --> 00:06:01.07
And we'll use the adjacent
sibling selector to do this.

130
00:06:01.07 --> 00:06:06.04
So back to our CSS,
after our pseudo-element,

131
00:06:06.04 --> 00:06:11.03
let's come in here and
let's type label space,

132
00:06:11.03 --> 00:06:13.09
then we'll target the input elements,

133
00:06:13.09 --> 00:06:18.00
then a :, then type the word checked,

134
00:06:18.00 --> 00:06:20.06
so this is a pseudo
class that an input gets

135
00:06:20.06 --> 00:06:22.09
if it's in a checked state.

136
00:06:22.09 --> 00:06:25.06
Then a space, then a + sign,

137
00:06:25.06 --> 00:06:27.02
and then div.

138
00:06:27.02 --> 00:06:29.01
So what we're doing here is
targeting that div element

139
00:06:29.01 --> 00:06:31.08
that appears immediately
after the input field.

140
00:06:31.08 --> 00:06:34.02
So if the input field
is in its checked state

141
00:06:34.02 --> 00:06:38.03
we can target this div element.

142
00:06:38.03 --> 00:06:40.02
So next we'll put in our brackets,

143
00:06:40.02 --> 00:06:42.09
we'll split this open,

144
00:06:42.09 --> 00:06:46.05
the first thing we'll set
is going to be border-color.

145
00:06:46.05 --> 00:06:52.01
We're going to change
border-color to # and fff.

146
00:06:52.01 --> 00:06:55.06
And then next we'll change the
background-color to be green.

147
00:06:55.06 --> 00:06:58.01
So background-color: space,

148
00:06:58.01 --> 00:07:02.04
here we'll just use the rgb colorspace,

149
00:07:02.04 --> 00:07:03.08
and inside of the parentheses for red

150
00:07:03.08 --> 00:07:07.01
we're going to set this
to 0,200 for green,

151
00:07:07.01 --> 00:07:09.05
and 0 for blue.

152
00:07:09.05 --> 00:07:11.01
So with this CSS rule in place

153
00:07:11.01 --> 00:07:14.00
save your CSS file, go back
to the browser and hit reload.

154
00:07:14.00 --> 00:07:15.05
We'll now see that the one div element

155
00:07:15.05 --> 00:07:19.06
that appears after the checkbox
that's in a checked state

156
00:07:19.06 --> 00:07:21.08
now has a green background.

157
00:07:21.08 --> 00:07:24.02
And so now that we've targeted
the indicator container

158
00:07:24.02 --> 00:07:25.07
let's come back to our CSS

159
00:07:25.07 --> 00:07:29.00
and let's target the indicator itself.

160
00:07:29.00 --> 00:07:31.04
So we'll type label space,

161
00:07:31.04 --> 00:07:36.01
input:checked, then a space,

162
00:07:36.01 --> 00:07:38.04
then we're going to
target the div element,

163
00:07:38.04 --> 00:07:43.01
so + div, then ::,

164
00:07:43.01 --> 00:07:45.02
we're going to target
the same pseudo-element,

165
00:07:45.02 --> 00:07:48.01
so we'll type the word after,

166
00:07:48.01 --> 00:07:49.06
put in our brackets,

167
00:07:49.06 --> 00:07:52.06
and then inside here we're
going to set the left property.

168
00:07:52.06 --> 00:07:54.03
And we're actually going
to use a calculation here,

169
00:07:54.03 --> 00:07:56.08
so that if we change the
width of the container

170
00:07:56.08 --> 00:07:57.08
we won't have to go in here

171
00:07:57.08 --> 00:08:00.04
and change the position of the indicator.

172
00:08:00.04 --> 00:08:03.06
So we'll target the
left property, : space,

173
00:08:03.06 --> 00:08:07.06
then we'll type calc, C-A-L-C,

174
00:08:07.06 --> 00:08:10.00
put in our parentheses and a ;,

175
00:08:10.00 --> 00:08:14.01
inside of the calculation
we're going to take 100%

176
00:08:14.01 --> 00:08:18.04
and we're going to subtract 21 pixels.

177
00:08:18.04 --> 00:08:22.04
So 100% minus 21 pixels.

178
00:08:22.04 --> 00:08:23.08
Then on the next line we're going to set

179
00:08:23.08 --> 00:08:26.03
our background-color to this as well.

180
00:08:26.03 --> 00:08:28.09
So the background-color of the
indicator is going to be white,

181
00:08:28.09 --> 00:08:32.06
so # and fff.

182
00:08:32.06 --> 00:08:36.07
And then finally we'll hide
the original checkboxes.

183
00:08:36.07 --> 00:08:38.06
So we'll create one more rule down here

184
00:08:38.06 --> 00:08:41.01
after the input that
targets the indicator,

185
00:08:41.01 --> 00:08:44.06
label space input,

186
00:08:44.06 --> 00:08:49.09
put in our brackets, set
a display type of none.

187
00:08:49.09 --> 00:08:51.05
Then with all of those in place

188
00:08:51.05 --> 00:08:54.05
save your CSS, go back to the browser,

189
00:08:54.05 --> 00:08:56.06
and we'll see that the div
element with the indicator

190
00:08:56.06 --> 00:09:00.02
if it follows an item with
an input in its checked state

191
00:09:00.02 --> 00:09:01.07
we get a green background

192
00:09:01.07 --> 00:09:03.05
and we get a full white border

193
00:09:03.05 --> 00:09:07.05
and we get an indicator
over on the right hand side.

194
00:09:07.05 --> 00:09:09.07
And then if I click these
you'll see the transition

195
00:09:09.07 --> 00:09:12.03
of the background property
and the indicator position

196
00:09:12.03 --> 00:09:14.01
showing up representing the checked state

197
00:09:14.01 --> 00:09:17.06
of each input element
inside of each label.

198
00:09:17.06 --> 00:09:19.02
And so now that we've
changed the user experience

199
00:09:19.02 --> 00:09:22.01
of checkboxes using CSS
you may want to explore

200
00:09:22.01 --> 00:09:24.03
more options for styling form elements.

201
00:09:24.03 --> 00:09:26.01
And you can find more
techniques in this course

202
00:09:26.01 --> 00:09:28.00
entitled Styling Form Elements,

203
00:09:28.00 --> 00:09:30.04
which is also available
here in the library.

204
00:09:30.04 --> 00:09:32.08
And so with that I'll
conclude this episode,

205
00:09:32.08 --> 00:09:35.07
and as always, thanks for watching.