- [Instructor] Hi, this is Chris Converse.
In this episode we'll take a look at creating styles
for form elements when they're in their focused state,
meaning they're activated and waiting for user input.
This will allow you to provide user feedback,
while keeping your sites color scheme more consistent.
So if you'd like to follow along with me,
download the exercise files and let's begin
by opening index.html in a text editor.
Now with the HTML file open you'll see, in the head area,
we have a link to style that CSS,
which we'll open in a moment.
Inside of the body area we have a form,
inside of the form we have an H1,
and then I have each of the input types for the form
inside of div elements.
And to preview the layout we're going to be working with,
you can open the index.html file up in a browser.
Now, inside of the browser, if you come in here
and click on a form field to activate it,
you can start typing inside.
Notice the highlight around the outside and the borders.
Every browser will render the forms a little bit differently
and show the focus a little bit differently.
So we're going to use CSS to target the focus state
of the form and colors so they're more consistent.
So I'll just delete my input here.
Next, let's go back to the exercise files.
Let's find style.css.
Let's open this in out text editor.
Let's scroll down a bit and let's look for where
we're targeting the input and text area
inside of our form element.
So it starts on line 42 here.
And the comma here, it lets us define
two selectors in the same role.
So after background color, let's come in here
and set a new property at the outline,
and we'll set this to 'none'.
With this in place, let's hit save,
let's go back to the browser, and now when we click on
the individual fields, to put them in their focus state,
we no longer see that blue highlight around the outside.
And again, you might see a different color highlight
depending on the browser you're using.
But with the outline set to 'none',
you shouldn't see anything.
So now let's go back to the CSS, after the outline property
inside of the form input and form text area.
Let's hit another return, and let's add a border.
So we'll use shorthand style here.
So border colon space, one pixel for the size,
'solid' for the style, and let's use 'RGBA' for the color.
put in our parentheses, then a semicolon.
And I don't want to have any color here, however,
when we assign a color for the focus state,
I don't want the forms to move around
because we've applied a border.
Because a border takes one pixel and will shift everything.
So we're basically gonna put an invisible border here.
So I'll do 'zero' for red, comma 'zero' for green,
comma 'zero' for blue, then a comma
and then a 'zero' for the alpha.
So again, this will add a border
that we won't be able to see.
So with this in place, let's hit save,
let's go back to the browser, let's hit reload,
and we'll now see that our invisible border's being applied,
so we just have gray fields here.
And now we're ready to create some CSS rules
that will target the focus state.
So let's go back to the CSS file, let's create a new rule,
we'll type 'form' space 'input', colon,
'focus', put in our brackets,
let's split this open.
Let's come in here and set a border dash color,
and we'll set this to a gold color.
So we'll use hexidecimal, so 'pound sign', 'f2' for red,
'9f' for green, and 'two seven' for blue, semicolon.
Next property, let's come in and set background color.
So background dash color, we're going to set this
to a green, so that's 'pound sign', 'four zero' for red,
'four zero' for green, and 'one five' for blue.
So with these in place, let's hit save.
Let's go back to the browser, let's come in here
and click on our fields.
So now my username is in a selected state,
we'll get a gold border and a green background.
Same thing for password.
However, if I come down and click inside the text area,
you'll notice that the color doesn't change.
This is not an input field but rather
a text area in the HTML.
So I'll just reset my form.
Let's go back to our CSS.
Let's come in here and add a second focus property.
So after input colon focus, let's hit a comma.
We're going to put this on the next line.
And let's type 'form' space 'text area', colon 'focus'.
Save your file, let's go back to the browser.
And now when I click inside of the text area
and begin to type, we'll see that the focus area
is now being applied to the text area as well.
Now the last thing I'd like to do is style
the submit button down here, so that the hover state
of the submit matches the focus state of the fields.
So again, let's go back to the CSS file.
After 'text area' colon 'focus', let's hit a comma,
let's hit a return.
Let's type 'form' space 'input'.
Then we're going to use the attribute selector in CSS,
so beginning and ending square bracket,
inside we're going to set type, 'equals', two quotes,
submit, then after the attribute selector,
we're going to hit a colon, and type in 'hover'.
With that in place, let's hit save, let's go
back to the browser one more time, and if I hover
over the submit button, we'll see that we get a gold border
and a green background, which matches the focus state
for the text area in the input fields.
So with just a few CSS properties, we're able
to style the focus state of form elements to better match
the colors of our web design.
Now if you'd like to explore more styling options
for form elements, take a look at our course entitled
'Styling Form Elements', which is also available
here in the library.
And with that, I'll conclude this episode,
and as always, thanks for watching.