Right here, we're increasing the font, but we're not really stylizing the placeholder the way that we'd like to. You can see the difference between how our placeholder text looks in the design.

Compared to how we have it styled in our project.

You see how the design has that dark blue color for the text area and the input? We're going to style our forms to match the design.

Let's switch to the code, and I'm going to come down below the text area and the input because this is going to be shared. This is going to be one where we're going to be able to update the input placeholder for the text area and the input all at the same time.

form.css

.form input::-webkit-input-placeholder, .form textarea::-webkit-input-placeholder {

}

What this is going to do is this is going to give us the ability to stylize that placeholder value.

This is only available in certain browsers, so if you do this and you're on Firefox, this will most likely not work, or if you're on, say, Microsoft Edge right now, that's not available, but it is available on Chrome and Safari. This should work for the majority of people accessing the website.

Let's add in our styles.

form.css

.form input::-webkit-input-placeholder, .form textarea::-webkit-input-placeholder {
    color: #11122b;
}

If you hit Save and refresh, you can see that that worked perfectly.

I am really loving the way all of this is coming along.

We just have a few more things that we are going to work on, especially this label animation that we're going to be building.

I think that that is definitely worth its own video because that's going to be probably one of the more challenging topics that we're covered throughout this entire course. We're going to take a break now and come back and we'll build that out.